/* Prevent horizontal scroll on narrow viewports; use full layout width */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

h1 {
    display: flex;
    justify-content: center;
    text-align: center;
}

/* Form container — wider cap so nominal + tolerance columns have room */
#calculationInputs .inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: min(100%, 900px);
    margin: 0 auto;
    padding: 0 1rem;
    container-type: inline-size;
    container-name: inputs;
}

/* Section Headers */
.section-header {
    grid-column: 1 / -1;
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    padding: 0.75rem 0 0.25rem 0;
    border-bottom: 2px solid #4a90e2;
    margin-top: 0.5rem;
}

.section-header:first-child {
    margin-top: 0;
}

/* Form Group Styling */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}

/* Input units — full row, centered; selector width matches diameter fields (one grid track) */
.input-units-group {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
    text-align: center;
}

/* When grid fits two 280px+ columns: match one column width (same as inputs beside each other) */
@container inputs (min-width: 585px) {
    .input-units-group {
        max-width: calc((100% - 1.5rem) / 2);
    }
}

.input-units-group label {
    width: 100%;
    text-align: center;
}

.input-units-group #inputUnit {
    width: 100%;
    box-sizing: border-box;
}

/* Temperature: unit selector + min / nominal / max */
.form-group--temp-units {
    grid-column: 1 / -1;
    max-width: 100%;
}

.form-group--temperature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem 1rem;
    align-items: stretch;
}

.form-group--temperature .temp-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-group--temperature .temp-field input {
    width: 100%;
}

.form-group--temperature .temp-field--nominal label {
    color: #333;
}

label {
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #555;
}

/* Input and Select Base Styling */
input, select {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    text-align: center;
}

input:focus, select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Dimension: title row, then nominal (col 1) + tolerance column (col 2) */
.form-group--dimension {
    display: grid;
    grid-template-columns: 1fr minmax(10.5rem, 13rem);
    column-gap: 0.5rem;
    row-gap: 0.3rem;
    align-items: start;
}

.form-group--dimension .dim-title {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    line-height: 1.25;
}

.form-group--dimension .dim-label-main {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
}

.form-group--dimension .dim-value {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    min-width: 0;
}

.form-group--dimension .tol-column {
    grid-column: 2;
    grid-row: 2 / span 2;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.form-group--dimension .dim-tol-heading {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    margin: 0;
}

.form-group--dimension .tol-mode {
    width: 100%;
    font-size: 0.85rem;
    padding: 0.4rem 0.35rem;
    text-align: center;
}

.form-group--dimension .tol-panel--hidden {
    display: none;
}

.form-group--dimension .tol-sublabel {
    font-size: 0.72rem;
    font-weight: 600;
    color: #666;
    margin: 0;
    text-align: center;
}

.form-group--dimension .tol-split-row {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 0.2rem 0.25rem;
    align-items: center;
}

.form-group--dimension .tol-limit-row {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 0.2rem 0.25rem;
    align-items: center;
}

.form-group--dimension .tol-panel input {
    width: 100%;
    min-width: 0;
    font-size: 0.88rem;
    padding: 0.45rem 0.3rem;
}

/* Input with Inline Unit Selector */
.input-with-unit {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.input-with-unit input {
    flex: 1;
    min-width: 0;
}

.input-with-unit .unit-selector {
    width: 70px;
    min-width: 70px;
    padding: 0.5rem 0.25rem;
    font-size: 0.9rem;
    cursor: pointer;
    background-color: #f8f9fa;
}

.input-with-unit .unit-selector:focus {
    border-color: #4a90e2;
}

/* Material Select Styling */
.form-group select:not(.unit-selector) {
    width: 100%;
}

/* Error/Normal States */
.matError {
    background-color: #ffcccc !important;
    border-color: #ff4444 !important;
}

.matNormal {
    background-color: white !important;
}

/* Button Styling */
.buttonDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.5rem 0 1rem 0;
}

.button {
    text-align: center;
    height: 3rem;
    width: 10rem;
    border: 0.25rem solid #4a90e2;
    border-radius: 0.25rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: #4a90e2;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.button:hover {
    background-color: #4a90e2;
    color: white;
}

.button:active {
    transform: scale(0.98);
}

.button--secondary {
    border-color: #94a3b8;
    color: #475569;
}

.button--secondary:hover {
    background-color: #64748b;
    border-color: #64748b;
    color: #fff;
}

/* Warnings from a successful Submit (tolerances, interference envelope, etc.) */
#calculationWarnings {
    max-width: min(100%, 900px);
    margin: 0 auto 0.75rem auto;
    padding: 0 1rem;
}

.calculation-warnings__inner {
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 0.35rem;
    padding: 0.65rem 0.85rem;
}

.calculation-warnings__title {
    margin: 0 0 0.45rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: #92400e;
}

.calculation-warnings__list {
    margin: 0;
    padding-left: 1.25rem;
    color: #78350f;
    line-height: 1.45;
    font-size: 0.92rem;
}

/* Calculation Outputs — align with form width on large screens */
#calcOutputs {
    max-width: min(100%, 900px);
    margin: 1rem auto;
    padding: 0 1rem;
}

#calcOutputs h2.outputs-heading {
    text-align: center;
    margin: 0 0 0.65rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #4a90e2;
    font-size: 1.35rem;
    font-weight: 700;
    color: #333;
}

/* Output Row - Title with inline unit selector */
.output-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 0.45rem 0 0.1rem 0;
}

#calcOutputs > h2 + .output-row {
    margin-top: 0;
}

/* Subsection titles under Outputs (hoop / radial) */
#calcOutputs .output-section-title {
    text-align: center;
    margin: 0.85rem 0 0.4rem 0;
    padding: 0.5rem 0 0.35rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    border-bottom: 2px solid #4a90e2;
}

#calcOutputs .output-section-title:first-of-type {
    margin-top: 0.5rem;
}

/* Hub/Pin hoop and radial blocks: two columns on wide viewports */
.output-pair--stress {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    align-items: start;
    margin: 1rem 0 1rem 0;
}

.output-pair--stress .output-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.output-pair--stress .output-column > .output-row {
    margin-top: 0.25rem;
    margin-bottom: 0.05rem;
}

.output-pair--stress .output-column > .output-row:first-child {
    margin-top: 0;
}

.output-pair--stress .output-column > p {
    margin-bottom: 0.15rem;
}

.output-pair--stress .output-row--canvas {
    justify-content: center;
    margin-top: 0.2rem;
    margin-bottom: 0.1rem;
}

.output-pair--stress canvas {
    display: block;
    width: 90%;
    max-width: 100%;
    height: auto;
}

@media (max-width: 620px) {
    .output-pair--stress {
        grid-template-columns: 1fr;
    }
}

/* Hide hoop/radial thickness canvas rows until first successful draw (not torque diagram) */
#calcOutputs .output-row--canvas:has(> canvas:not([data-drawn])) {
    display: none;
}

/* Canvas-only rows: less air above/below the plot (single-column rows outside pairs) */
#calcOutputs > .output-row:has(> canvas:only-child) {
    margin-top: 0.25rem;
    margin-bottom: 0.15rem;
}

.output-row h3 {
    margin: 0;
    font-size: 1rem;
    color: #555;
}

.output-row select {
    width: auto;
    min-width: 100px;
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
}

#calcOutputs p {
    text-align: center;
    padding: 0.1rem 0 0.25rem 0;
    margin: 0 0 0.2rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

#calcOutputs .output-scenario-line {
    display: block;
    margin: 0.25rem 0;
    line-height: 1.35;
    font-weight: 500;
}

#calcOutputs .output-scenario-line strong {
    color: #444;
    margin-right: 0.2rem;
}

#calcOutputs .output-mu-note {
    display: inline-block;
    margin-top: 0.2rem;
    font-size: 0.88rem;
    color: #555;
    font-weight: 600;
}

#calcOutputs .output-tol-note {
    font-size: 0.82rem;
    color: #777;
    font-weight: 500;
}

/* Nominal vs tolerance range (stress / force / torque) */
#calcOutputs .output-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin: 0.15rem 0 0 0;
}

@media (min-width: 640px) {
    #calcOutputs .output-split {
        grid-template-columns: 1fr 1fr;
        gap: 1rem 1.25rem;
        align-items: start;
    }
}

#calcOutputs .output-split__block {
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    background: #fafbfc;
    border: 1px solid #e8eaed;
}

#calcOutputs .output-split__block--tolerance {
    background: #f5f9ff;
    border-color: #c5d9f0;
}

#calcOutputs .output-split__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
    margin-bottom: 0.35rem;
}

#calcOutputs .output-split__hint {
    display: block;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: #666;
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

/* Interference summary table */
#calcOutputs .output-interference-container {
    margin: 1rem auto 1rem;
    max-width: min(100%, 720px);
    overflow-x: auto;
}

#calcOutputs .output-interference-container.output-interference-container--no-fit {
    padding: 0.65rem 0.75rem;
    border-radius: 0.35rem;
    border: 2px solid #e53935;
    background: #ffcdd2;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px rgba(183, 28, 28, 0.15);
}

#calcOutputs table.output-interference-table.output-interference-table--no-fit {
    outline: 2px solid #c62828;
    outline-offset: 0;
    border-radius: 0.25rem;
    background: #fff8f8;
}

#calcOutputs table.output-interference-table.output-interference-table--no-fit thead th {
    background: #ffcdd2;
    color: #6d1b1b;
}

#calcOutputs table.output-interference-table td.output-interference-cell--negative {
    background: #ffcdd2 !important;
    color: #b71c1c;
    font-weight: 600;
}

#calcOutputs .output-interference-alert {
    margin: 0.75rem 0 0.15rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #b71c1c;
    font-weight: 500;
}

#calcOutputs .output-interference-warning--loss {
    margin: 0.75rem 0 0.15rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.3rem;
    border-left: 4px solid #ef6c00;
    background: #fff8e1;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #5d4037;
    font-weight: 500;
}

#calcOutputs table.output-interference-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

#calcOutputs table.output-interference-table th,
#calcOutputs table.output-interference-table td {
    border: 1px solid #dfe3e8;
    padding: 0.45rem 0.55rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#calcOutputs table.output-interference-table td.output-plot-selectable-cell {
    cursor: pointer;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

#calcOutputs table.output-interference-table td.output-plot-selectable-cell:hover {
    background: rgba(74, 144, 226, 0.08);
}

#calcOutputs table.output-interference-table td.output-plot-selectable-cell--active {
    background: rgba(74, 144, 226, 0.2);
    box-shadow: inset 0 0 0 2px rgba(74, 144, 226, 0.45);
}

#calcOutputs table.output-interference-table td.output-plot-selectable-cell:focus {
    outline: 2px solid rgba(74, 144, 226, 0.75);
    outline-offset: -2px;
}

#calcOutputs table.output-interference-table thead tr:first-child th:first-child {
    text-align: left;
    vertical-align: middle;
}

#calcOutputs table.output-interference-table thead tr:first-child th.output-interference-thead-group {
    text-align: center;
}

#calcOutputs table.output-interference-table thead tr:nth-child(2) th[scope="col"] {
    text-align: center;
}

#calcOutputs table.output-interference-table th[scope="col"],
#calcOutputs table.output-interference-table th[scope="colgroup"] {
    background: #f4f7fb;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #444;
}

#calcOutputs table.output-interference-table th[scope="row"] {
    text-align: left;
    background: #fafbfc;
    font-weight: 600;
    font-size: 0.85rem;
    vertical-align: middle;
}

#calcOutputs .output-interference-temp {
    font-weight: 500;
    color: #666;
    font-size: 0.8rem;
}

#calcOutputs .output-interference-placeholder {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.9rem;
    color: #666;
}

/* Friction override (press force / torque scale with μ) */
.friction-override {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem auto 0.65rem;
    max-width: 22rem;
}

.friction-override-toggle {
    font-size: 0.85rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid #4a90e2;
    border-radius: 0.25rem;
    background: #fff;
    color: #4a90e2;
    font-weight: 600;
    cursor: pointer;
}

.friction-override-toggle:hover {
    background: rgba(74, 144, 226, 0.08);
}

.friction-override-toggle[aria-pressed="true"] {
    background: #4a90e2;
    color: #fff;
}

.friction-override-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.friction-override-panel--hidden {
    display: none;
}

.friction-override-label {
    font-weight: 600;
    color: #555;
    margin: 0;
    font-size: 0.95rem;
}

.friction-override-panel #frictionCoefficientInput {
    width: 5.5rem;
    text-align: center;
}

.output-row--force-visual {
    margin-top: 0.25rem;
    margin-bottom: 0.15rem;
}

.output-row--force-overlap-chart {
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
    /* Stable box for canvas layout: table selection above must not widen/narrow this row. */
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.output-row--torque-visual {
    margin-top: 0.35rem;
    margin-bottom: 0.25rem;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* No layout space until first successful calculation (see main.js data-drawn on canvas) */
#calcOutputs .output-row--force-visual:has(> #pressForceVisualCanvas:not([data-drawn])) {
    display: none;
}

#calcOutputs .output-row--force-overlap-chart:has(> #pressForceOverlapCanvas:not([data-drawn])) {
    display: none;
}

#calcOutputs .output-row--torque-visual:has(> #torqueVisualCanvas:not([data-drawn])) {
    display: none;
}

#pressForceVisualCanvas,
#pressForceOverlapCanvas,
#torqueVisualCanvas {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    background-color: #ffffff;
}

#hubHoopThicknessCanvas,
#pinHoopThicknessCanvas,
#hubRadialThicknessCanvas,
#pinRadialThicknessCanvas {
    background-color: #ffffff;
}

/* D3 Plot Styling — match output column width and center on the page */
#d3Container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 650px;
    margin: 0.5rem auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

#d3Container:empty {
    display: none;
    margin: 0;
    padding: 0;
}

#d3Container svg {
    display: block;
    margin: 0 auto;
}

/* Plotly — no min-height when empty (avoids large blank band before first plot) */
#plotlyContainer {
    width: min(100%, 400px);
    max-width: 100%;
    min-height: 0;
    margin: 0.5rem auto;
    padding: 0;
    box-sizing: border-box;
}

#plotlyContainer:empty {
    margin: 0;
}

#plotlyContainer:not(:empty) {
    min-height: 320px;
}

#plotlyContainer canvas {
    display: block;
    margin: 0 auto;
}

/* Stress canvas — scale down on small screens; intrinsic drawing size stays 300×300 */
#stressCanvas {
    display: block;
    width: min(100%, 300px);
    max-width: 100%;
    height: auto;
    margin: 0.5rem auto;
}

#stressCanvas:not([data-drawn]) {
    display: none;
}

/* Responsive Adjustments */
@media (max-width: 500px) {
    #calculationInputs .inputs {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-group--temperature {
        grid-template-columns: 1fr;
    }
    
    .input-with-unit .unit-selector {
        width: 60px;
        min-width: 60px;
        font-size: 0.85rem;
    }
}

/* Toast Notification Styling */
#errorToast {
    font-family: Arial, sans-serif;
    position: fixed;
    top: 10rem;
    right: 3rem;
    z-index: 1000;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    padding: 1rem 1.5rem;
    border-radius: 0.25rem;
    text-align: center;
}

#errorToast.toast--error {
    background-color: #ffcccc;
    border: 1px solid #ff4444;
}

#errorToast.toast--warning {
    background-color: #fff8e6;
    border: 1px solid #d4a017;
}

#errorToast .toast-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    font-size: 1rem;
    border-radius: 0.5rem;
    min-width: 280px;
}

#errorToast .toast-content span {
    color: #333;
    font-size: 0.95rem;
    line-height: 1.4;
}

#errorToast.toast--error .toast-close {
    background: none;
    border: none;
    color: #ff4444;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

#errorToast.toast--error .toast-close:hover {
    color: #cc0000;
}

#errorToast.toast--warning .toast-close {
    background: none;
    border: none;
    color: #a67c00;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

#errorToast.toast--warning .toast-close:hover {
    color: #6b5200;
}

#errorToast.show {
    opacity: 1;
    transform: translateX(0);
}

#errorToast.show ~ * {
    filter: blur(2px);
}

.report-actions {
    display: flex;
    justify-content: center;
    padding: 1.25rem 0 0.5rem 0;
}

.report-create-btn {
    width: auto;
    min-width: 12rem;
    padding: 0 1rem;
}

.report-create-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media print {
    .no-print {
        display: none !important;
    }

    canvas {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}