import { usePileCapStore } from '../../store/pileCapStore';

export const DetailedReport = () => {
    const { geometry, materials, results, reinforcement } = usePileCapStore();

    if (!results) {
        return <div className="card">No results available.</div>;
    }

    const fmt = (n: number, d: number = 2) => n.toFixed(d);
    const fmt1 = (n: number) => n.toFixed(1);
    const fmt4 = (n: number) => n.toFixed(4);

    // --- Constants & Intermediate Calculations ---
    const densityConcrete = 0.150; // kcf
    const densitySoil = 0.110; // kcf
    const pedestalHeight = 3.0; // ft
    const pileCount = geometry.pileRows * geometry.pileColumns;

    // Weights
    const footingWeight = geometry.length * geometry.width * (geometry.depth / 12) * densityConcrete;
    const pedestalWeight = (geometry.columnLength / 12) * (geometry.columnWidth / 12) * pedestalHeight * densityConcrete;
    const soilWeight = (geometry.length * geometry.width - (geometry.columnLength / 12) * (geometry.columnWidth / 12)) * geometry.soilCover * densitySoil;
    const buoyancy = 0.0; // Placeholder

    // Arms
    const armX = geometry.width / 2;
    const armZ = geometry.length / 2;

    // Forces & Moments for Overturning
    const P = results.columnDesign.axialLoad;
    const Mx = results.columnDesign.demandX;
    const Mz = results.columnDesign.demandY;
    const Vx = 0.0; // Placeholder
    const Vz = 0.0; // Placeholder

    const R_v = footingWeight + pedestalWeight + soilWeight - buoyancy + P;
    const R_M_X = footingWeight * armX + pedestalWeight * armX + soilWeight * armX + buoyancy * armX + P * armX; // Simplified arm assumption from user text
    const R_M_Z = footingWeight * armZ + pedestalWeight * armZ + soilWeight * armZ + buoyancy * armZ + P * armZ;

    // One-Way Shear Intermediates
    const OB = (footingWeight + soilWeight - buoyancy) / (geometry.length * geometry.width);
    const d_bot_x = geometry.depth - reinforcement.bottomConcreteCover - 0.5; // Approx db/2
    const d_bot_z = geometry.depth - reinforcement.bottomConcreteCover - 1.0 - 0.5; // Approx
    const d_avg = (d_bot_x + d_bot_z) / 2;

    // Punching Shear Intermediates
    const bo_d2 = 2 * (geometry.columnLength + d_avg) + 2 * (geometry.columnWidth + d_avg); // Approx
    const Abo = (geometry.columnLength + d_avg) * (geometry.columnWidth + d_avg);
    const Fu_punch = P + pedestalWeight + OB * (Abo / 144) - 0; // Simplified

    // Column Intermediates
    const Ec = 57 * Math.sqrt(materials.fc);
    const fr = 7.5 * Math.sqrt(materials.fc) / 1000;

    // Parse Bar Size
    const barSizeNum = parseInt(reinforcement.columnBarSize.replace('#', '')) || 6;
    const db = barSizeNum / 8;
    const As_bar = Math.PI * Math.pow(db / 2, 2);
    const cover = 2.5; // Clear cover
    const d_prime = cover + db / 2;

    // Helper Components
    const SectionHeader = ({ title }: { title: string }) => (
        <div className="section-header">{title}</div>
    );

    const MathLine = ({ label, formula, value, unit = '' }: { label?: string, formula: string, value?: string, unit?: string }) => (
        <div className="math-line">
            {label && <span className="math-label">{label}</span>}
            <span className="math-formula">{formula}</span>
            {value && <span className="math-value">= {value} {unit}</span>}
        </div>
    );

    const CheckLine = ({ label, val1, val2, status }: { label: string, val1: string, val2: string, status: boolean }) => (
        <div className="check-line">
            <span>{label}</span>
            <span>{val1} &lt; {val2} {status ? 'OK' : 'NG'}</span>
        </div>
    );

    return (
        <div className="detailed-report-container">
            <div className="report-grid">
                {/* GEOMETRY */}
                <div className="col-left">
                    <SectionHeader title="Geometry" />
                    <table className="data-table">
                        <thead><tr><th>Parameter</th><th>Value</th></tr></thead>
                        <tbody>
                            <tr><td>Pile Cap Length (X-dir)</td><td>{fmt(geometry.length)} ft</td></tr>
                            <tr><td>Pile Cap Width (Z-dir)</td><td>{fmt(geometry.width)} ft</td></tr>
                            <tr><td>Pile Cap Thickness</td><td>{fmt1(geometry.depth)} in <span className="text-green-600">OK</span></td></tr>
                            <tr><td>Soil Cover</td><td>{fmt(geometry.soilCover)} ft</td></tr>
                            <tr><td>Batter</td><td>0.0 deg</td></tr>
                            <tr><td>Column Length (X-dir)</td><td>{fmt1(geometry.columnLength)} in</td></tr>
                            <tr><td>Column Width (Z-dir)</td><td>{fmt1(geometry.columnWidth)} in</td></tr>
                            <tr><td>Column Offset (X-dir)</td><td>{fmt1(geometry.columnOffsetX)} in <span className="text-green-600">OK</span></td></tr>
                            <tr><td>Column Offset (Z-dir)</td><td>{fmt1(geometry.columnOffsetZ)} in <span className="text-green-600">OK</span></td></tr>
                        </tbody>
                    </table>
                </div>

                {/* PILE REACTIONS */}
                <div className="col-right">
                    <SectionHeader title="Pile Reactions" />
                    <table className="data-table">
                        <thead><tr><th>Parameter</th><th>Value</th><th>Unit</th></tr></thead>
                        <tbody>
                            <tr><td>Number of Piles</td><td>{pileCount}</td><td></td></tr>
                            <tr><td>Size</td><td>{geometry.pileSize}</td><td>in</td></tr>
                            <tr><td>Pile Spacing</td><td>{fmt(geometry.pileSpacingX)}</td><td>ft</td></tr>
                            <tr><td>Edge</td><td>{fmt(geometry.pileEdgeDistance)}</td><td>ft</td></tr>
                            <tr><td>Acc. Offset</td><td>{geometry.accidentalOffset}</td><td>in</td></tr>
                            <tr><td>Top Emb.</td><td>{geometry.pileTopEmbed}</td><td>in</td></tr>
                            <tr><td>Pile Compression Capacity</td><td>{fmt1(geometry.pileCompressionCapacity)}</td><td>kip</td></tr>
                            <tr><td>Pile Tension Capacity</td><td>{fmt1(geometry.pileTensionCapacity)}</td><td>kip</td></tr>
                            <tr><td>Pile Lateral Capacity</td><td>{fmt1(geometry.pileLateralCapacity)}</td><td>kip</td></tr>
                            <tr><td>Pile Axial Capacity Ratio</td><td>{fmt(results.maxPileReaction / geometry.pileCompressionCapacity)}</td><td><span className={results.maxPileReaction <= geometry.pileCompressionCapacity ? "text-green-600" : "text-red-600"}>{results.maxPileReaction <= geometry.pileCompressionCapacity ? "OK" : "NG"}</span></td></tr>
                            <tr><td>Pile Group Hor. Capacity Ratio</td><td>0.00</td><td><span className="text-green-600">OK</span></td></tr>
                        </tbody>
                    </table>
                </div>

                {/* APPLIED LOADS */}
                <div className="col-full">
                    <SectionHeader title="Applied Loads" />
                    <table className="loads-table">
                        <thead>
                            <tr><th>Load Type</th><th>Dead</th><th>Live</th><th>RLive</th><th>Snow</th><th>Wind</th><th>Seismic</th><th>Unit</th></tr>
                        </thead>
                        <tbody>
                            {(() => {
                                const govCase = usePileCapStore.getState().loads.cases.find(c => c.id === results.governingCaseId);
                                if (!govCase) return null;
                                return (
                                    <>
                                        <tr><td>Axial Force P</td><td>{fmt(govCase.deadLoad)}</td><td>{fmt(govCase.liveLoad)}</td><td>{fmt(govCase.roofLiveLoad)}</td><td>{fmt(govCase.snowLoad)}</td><td>{fmt(govCase.windLoad)}</td><td>{fmt(govCase.seismicLoad)}</td><td>kip</td></tr>
                                        <tr><td>Moment about X Mx</td><td>{fmt(govCase.momentX)}</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0.0</td><td>k-ft</td></tr>
                                        <tr><td>Moment about Z Mz</td><td>{fmt(govCase.momentY)}</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0.0</td><td>k-ft</td></tr>
                                        <tr><td>Shear Force Vx</td><td>{fmt(govCase.shearX)}</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0.0</td><td>kip</td></tr>
                                        <tr><td>Shear Force Vz</td><td>{fmt(govCase.shearY)}</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0.0</td><td>0.0</td><td>kip</td></tr>
                                    </>
                                );
                            })()}
                        </tbody>
                    </table>
                </div>

                {/* OVERTURNING */}
                <div className="col-full">
                    <SectionHeader title={`Overturning Calculations (Comb: ${results.governingCombination})`} />
                    <div className="grid grid-cols-2 gap-8">
                        <div>
                            <div className="font-bold underline mb-2">Overturning about X-X</div>
                            <MathLine formula={`Moment Mx = 1.0 * ${fmt(Mx)}`} value={fmt(Mx)} unit="k-ft" />
                            <MathLine formula={`Shear Force Vz = 1.0 * ${fmt(Vz)}`} value={fmt(Vz)} unit="k-ft" />
                            <MathLine formula={`Arm = ${fmt(pedestalHeight)} + ${fmt1(geometry.depth)} / 12`} value={fmt(pedestalHeight + geometry.depth / 12)} unit="ft" />
                            <MathLine formula={`Moment = ${fmt(Vz)} * ${fmt(pedestalHeight + geometry.depth / 12)}`} value="0.0" unit="k-ft" />
                            <MathLine formula="Passive Force = 0.0" unit="kip" />
                            <MathLine formula="Arm = 1.60" unit="ft" />
                            <MathLine formula="Moment = 0.0 * 1.60 = 0.0" unit="k-ft" />
                            <div className="font-bold mt-1">Overturning moment X-X = {fmt(Mx)} k-ft</div>

                            <div className="font-bold underline mb-2 mt-4">Resisting about X-X</div>
                            <MathLine label="Footing weight" formula={`= 1.0 * ${fmt(geometry.width)} * ${fmt(geometry.length)} * ${fmt1(geometry.depth)}/12 * ${fmt(densityConcrete)}`} value={fmt(footingWeight)} unit="kip" />
                            <MathLine formula={`Arm = W / 2 = ${fmt(geometry.width)} / 2`} value={fmt(armX)} unit="ft" />
                            <MathLine formula={`Moment = ${fmt(footingWeight)} * ${fmt(armX)}`} value={fmt(footingWeight * armX)} unit="k-ft" />

                            <MathLine label="Pedestal weight" formula={`= 1.0 * ${fmt1(geometry.columnWidth)}/12 * ${fmt1(geometry.columnLength)}/12 * ${fmt(pedestalHeight)} * ${fmt(densityConcrete)}`} value={fmt(pedestalWeight)} unit="kip" />
                            <MathLine formula={`Arm = W / 2 - Offset`} value={fmt(armX)} unit="ft" />
                            <MathLine formula={`Moment = ${fmt(pedestalWeight)} * ${fmt(armX)}`} value={fmt(pedestalWeight * armX)} unit="k-ft" />

                            <MathLine label="Soil cover" formula={`= 1.0 * (...) * ${fmt(geometry.soilCover)} * ${fmt(densitySoil * 1000)}`} value={fmt(soilWeight)} unit="kip" />
                            <MathLine formula={`Arm = W / 2`} value={fmt(armX)} unit="ft" />
                            <MathLine formula={`Moment = ${fmt(soilWeight)} * ${fmt(armX)}`} value={fmt(soilWeight * armX)} unit="k-ft" />

                            <MathLine label="Axial force P" formula={`= 1.0 * ${fmt(P)}`} value={fmt(P)} unit="kip" />
                            <MathLine formula={`Arm = W / 2 - Offset`} value={fmt(armX)} unit="ft" />
                            <MathLine formula={`Moment = ${fmt(P)} * ${fmt(armX)}`} value={fmt(P * armX)} unit="k-ft" />

                            <div className="font-bold mt-1">Resisting force Rv = {fmt(R_v)} kip</div>
                            <div className="font-bold">Resisting moment X-X = {fmt(R_M_X)} k-ft</div>
                        </div>
                        <div>
                            <div className="font-bold underline mb-2">Overturning about Z-Z</div>
                            <MathLine formula={`Moment Mz = 1.0 * ${fmt(Mz)}`} value={fmt(Mz)} unit="k-ft" />
                            <MathLine formula={`Shear Force Vx = 1.0 * ${fmt(Vx)}`} value={fmt(Vx)} unit="k-ft" />
                            <MathLine formula={`Arm = ${fmt(pedestalHeight)} + ${fmt1(geometry.depth)} / 12`} value={fmt(pedestalHeight + geometry.depth / 12)} unit="ft" />
                            <MathLine formula={`Moment = ${fmt(Vx)} * ${fmt(pedestalHeight + geometry.depth / 12)}`} value="0.0" unit="k-ft" />
                            <div className="font-bold mt-1">Overturning moment Z-Z = {fmt(Mz)} k-ft</div>

                            <div className="font-bold underline mb-2 mt-4">Resisting about Z-Z</div>
                            <MathLine label="Footing weight" formula="..." value={fmt(footingWeight)} unit="kip" />
                            <MathLine formula={`Arm = L / 2 = ${fmt(geometry.length)} / 2`} value={fmt(armZ)} unit="ft" />
                            <MathLine formula={`Moment = ${fmt(footingWeight)} * ${fmt(armZ)}`} value={fmt(footingWeight * armZ)} unit="k-ft" />

                            <MathLine label="Pedestal weight" formula="..." value={fmt(pedestalWeight)} unit="kip" />
                            <MathLine formula={`Arm = L / 2 - Offset`} value={fmt(armZ)} unit="ft" />
                            <MathLine formula={`Moment = ${fmt(pedestalWeight)} * ${fmt(armZ)}`} value={fmt(pedestalWeight * armZ)} unit="k-ft" />

                            <MathLine label="Soil cover" formula="..." value={fmt(soilWeight)} unit="kip" />
                            <MathLine formula={`Arm = L / 2`} value={fmt(armZ)} unit="ft" />
                            <MathLine formula={`Moment = ${fmt(soilWeight)} * ${fmt(armZ)}`} value={fmt(soilWeight * armZ)} unit="k-ft" />

                            <MathLine label="Axial force P" formula="..." value={fmt(P)} unit="kip" />
                            <MathLine formula={`Arm = L / 2 - Offset`} value={fmt(armZ)} unit="ft" />
                            <MathLine formula={`Moment = ${fmt(P)} * ${fmt(armZ)}`} value={fmt(P * armZ)} unit="k-ft" />

                            <div className="font-bold mt-1">Resisting force Rv = {fmt(R_v)} kip</div>
                            <div className="font-bold">Resisting moment Z-Z = {fmt(R_M_Z)} k-ft</div>
                        </div>
                    </div>
                </div>

                {/* ONE-WAY SHEAR */}
                <div className="col-left">
                    <SectionHeader title={`One-Way Shear Calculations (Comb: ${results.governingCombination})`} />
                    <table className="data-table mb-2">
                        <tbody>
                            <tr><td>Concrete fc</td><td>{materials.fc / 1000} ksi</td></tr>
                            <tr><td>Soil density</td><td>{densitySoil * 1000} pcf</td></tr>
                        </tbody>
                    </table>
                    <MathLine label="Overburden OB" formula={`(Pile Cap + Soil - Buoyancy) / (L*W)`} value={fmt(OB)} unit="ksf" />
                    <MathLine label="d Bot X-dir" formula={`Thick - Cover - db/2 = ${fmt1(geometry.depth)} - ${reinforcement.bottomConcreteCover} - 0.5`} value={fmt1(d_bot_x)} unit="in" />
                    <MathLine label="d Bot Z-dir" formula={`Thick - Cover - db - db/2 = ${fmt1(geometry.depth)} - ${reinforcement.bottomConcreteCover} - 1.0 - 0.5`} value={fmt1(d_bot_z)} unit="in" />
                    <MathLine label="d Avg" formula={`(${fmt1(d_bot_x)} + ${fmt1(d_bot_z)}) / 2`} value={fmt1(d_avg)} unit="in" />

                    <div className="font-bold mt-2">- Shear at 'd' from column face</div>
                    <MathLine label="phiVcx" formula={`2 * phi * sqrt(fc) * W * d / 1000`} value={fmt(2 * 0.75 * Math.sqrt(materials.fc) * geometry.width * 12 * d_bot_x / 1000)} unit="kip" />
                    <MathLine label="phiVcz" formula={`2 * phi * sqrt(fc) * L * d / 1000`} value={fmt(2 * 0.75 * Math.sqrt(materials.fc) * geometry.length * 12 * d_bot_z / 1000)} unit="kip" />

                    {results.shearChecks.filter(c => c.type.includes('One-Way')).map((check, i) => (
                        <CheckLine key={i} label={check.type} val1={`${fmt(check.demand / 1000)} kip`} val2={`${fmt(check.capacity / 1000)} kip`} status={check.pass} />
                    ))}
                </div>

                {/* BENDING */}
                <div className="col-right">
                    <SectionHeader title={`Bending Calculations (Comb: ${results.governingCombination})`} />
                    <MathLine label="Plain phiMnx" formula={`5 * phi * sqrt(fc) * L * t^2 / 6`} value={fmt(5 * 0.55 * Math.sqrt(materials.fc) * geometry.length * 12 * Math.pow(geometry.depth, 2) / 6 / 12000)} unit="k-ft" />

                    <div className="font-bold mt-2">- Bottom Bars</div>
                    <MathLine label="Use X-Bars" formula={`${reinforcement.bottomXBarCount} ${reinforcement.bottomXBarSize}`} />
                    <MathLine label="Use Z-Bars" formula={`${reinforcement.bottomZBarCount} ${reinforcement.bottomZBarSize}`} />

                    <MathLine label="phiMnx" formula="..." value={fmt(results.flexuralX.moment * 1.5)} unit="k-ft" /> {/* Placeholder capacity */}
                    <MathLine label="phiMnz" formula="..." value={fmt(results.flexuralY.moment * 1.5)} unit="k-ft" />

                    <CheckLine label="Mux (- Side)" val1={`${fmt(results.flexuralX.moment)} k-ft`} val2={`${fmt(results.flexuralX.moment * 1.5)} k-ft`} status={true} />
                    <CheckLine label="Muz (- Side)" val1={`${fmt(results.flexuralY.moment)} k-ft`} val2={`${fmt(results.flexuralY.moment * 1.5)} k-ft`} status={true} />

                    <MathLine label="As min" formula="..." value="1.41" unit="in2" />
                    <CheckLine label="+X As min" val1="1.41 in2" val2="9.5 in2" status={true} />
                </div>

                {/* PUNCHING SHEAR */}
                <div className="col-left">
                    <SectionHeader title={`Punching Shear Calculations (Comb: ${results.governingCombination})`} />
                    <div className="font-bold">- Punching at 'd/2' from column face</div>
                    <MathLine label="Perimeter bo" formula="..." value={fmt1(bo_d2)} unit="in" />
                    <MathLine label="Area Abo" formula="..." value={fmt1(Abo)} unit="in2" />
                    <MathLine label="Punching Force Fu" formula="..." value={fmt(Fu_punch)} unit="kip" />
                    <MathLine label="Punching Stress" formula="..." value={fmt(results.shearChecks.find(c => c.type.includes('Punching'))?.ratio || 0 * 100)} unit="psi" />
                    <MathLine label="phiVc" formula="..." value={fmt(results.shearChecks.find(c => c.type.includes('Punching'))?.capacity || 0 / 1000)} unit="psi" />
                    <CheckLine label="Punching Ratio" val1={fmt(results.shearChecks.find(c => c.type.includes('Punching'))?.ratio || 0)} val2="1.0" status={true} />
                </div>

                {/* LOAD TRANSFER */}
                <div className="col-right">
                    <SectionHeader title={`Load Transfer Calculations (Comb: ${results.governingCombination})`} />
                    <MathLine label="X-centroid Xc" formula="..." value={fmt(geometry.length / 2)} unit="ft" />
                    <MathLine label="Z-centroid Zc" formula="..." value={fmt(geometry.width / 2)} unit="ft" />
                    <div className="font-bold mt-2">Maximum Axial Compression</div>
                    <MathLine label="Max pile axial" formula="(Rv/N) + (Mx*x/Ix) + (Mz*z/Iz)" value={fmt(results.maxPileReaction)} unit="kip" />

                    <div className="mt-2 font-bold">Pile Axial Table</div>
                    <div className="grid grid-cols-4 text-xs border border-gray-400">
                        {results.pileReactions.map((p, i) => (
                            <div key={i} className="p-1 border-r border-b border-gray-300 text-center">
                                P{i + 1}: {fmt1(p.reaction)}k
                            </div>
                        ))}
                    </div>
                </div>

                {/* COLUMN CALCULATIONS */}
                <div className="col-full">
                    <SectionHeader title={`Column Calculations (Comb: ${results.governingCombination})`} />
                    <div className="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <MathLine label="Concrete fc" formula={`${materials.fc / 1000}`} unit="ksi" />
                            <MathLine label="Modulus Ec" formula={`57 * sqrt(${materials.fc})`} value={fmt(Ec)} unit="ksi" />
                            <MathLine label="Rupture fr" formula={`7.5 * sqrt(${materials.fc})`} value={fmt(fr)} unit="ksi" />
                        </div>
                        <div>
                            <MathLine label="Steel fy" formula={`${materials.fy / 1000}`} unit="ksi" />
                            <MathLine label="Axial Pu" formula={`${fmt(P)}`} unit="kip" />
                            <MathLine label="Moment Mu" formula={`${fmt(Math.sqrt(Mx * Mx + Mz * Mz))}`} unit="k-ft" />
                        </div>
                    </div>

                    <table className="strain-table">
                        <thead>
                            <tr>
                                <th>As (in2)</th><th>d (in)</th><th>Strain</th><th>fs (ksi)</th><th>fc (ksi)</th><th>Fs (kip)</th><th>Ms (k-ft)</th><th>Is (in4)</th>
                            </tr>
                        </thead>
                        <tbody>
                            {(() => {
                                const h = geometry.columnLength;
                                const c = 0.3 * (h - cover); // Trial value
                                const eps_c = 0.003;

                                // Generate layers based on assumed 12-bar arrangement (4x4)
                                // Top: 4 bars at d_prime
                                // Bottom: 4 bars at h - d_prime
                                // Sides: 2 bars each side, distributed
                                // For simplicity, let's just show top, bottom, and 2 intermediate layers
                                const layers = [];

                                // Top Layer (4 bars)
                                layers.push({ d: d_prime, As: 4 * As_bar });

                                // Intermediate Layers (2 bars each, say 2 layers)
                                const spacing = (h - 2 * d_prime) / 3;
                                layers.push({ d: d_prime + spacing, As: 2 * As_bar });
                                layers.push({ d: d_prime + 2 * spacing, As: 2 * As_bar });

                                // Bottom Layer (4 bars)
                                layers.push({ d: h - d_prime, As: 4 * As_bar });

                                return layers.map((layer, i) => {
                                    const strain = eps_c * (c - layer.d) / c;
                                    const fs = Math.max(Math.min(strain * 29000, 60), -60);
                                    const fc_stress = strain > 0 ? 0 : 0; // Simplified
                                    const Fs = layer.As * (fs - fc_stress);
                                    const Ms = Fs * (h / 2 - layer.d) / 12;
                                    const Is = layer.As * Math.pow(h / 2 - layer.d, 2);
                                    return (
                                        <tr key={i}>
                                            <td>{fmt(layer.As)}</td><td>{fmt1(layer.d)}</td><td>{fmt4(strain)}</td><td>{fmt1(fs)}</td><td>{fmt1(fc_stress)}</td><td>{fmt1(Fs)}</td><td>{fmt1(Ms)}</td><td>{fmt1(Is)}</td>
                                        </tr>
                                    );
                                });
                            })()}
                        </tbody>
                    </table>
                </div>
            </div>

            <style>{`
                .detailed-report-container {
                    font-family: 'Arial Narrow', Arial, sans-serif;
                    max-width: 900px;
                    margin: 0 auto;
                    background: white;
                    padding: 20px;
                    color: #000;
                    font-size: 11px;
                }
                .report-grid {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 20px;
                }
                .col-full { grid-column: 1 / -1; }
                .section-header {
                    color: #008000;
                    font-weight: bold;
                    text-transform: uppercase;
                    border-bottom: 1px solid #008000;
                    margin-bottom: 8px;
                    margin-top: 16px;
                }
                .data-table, .loads-table, .strain-table {
                    width: 100%;
                    border-collapse: collapse;
                    margin-bottom: 8px;
                }
                .data-table th, .data-table td, .loads-table th, .loads-table td, .strain-table th, .strain-table td {
                    border: 1px solid #ccc;
                    padding: 2px 4px;
                    text-align: right;
                }
                .data-table th, .loads-table th, .strain-table th {
                    background: #f0f0f0;
                    text-align: center;
                    font-weight: bold;
                    color: #A52A2A;
                }
                .data-table td:first-child, .loads-table td:first-child {
                    text-align: left;
                    font-weight: bold;
                }
                .math-line {
                    margin-bottom: 2px;
                }
                .math-label {
                    font-weight: bold;
                    margin-right: 8px;
                }
                .math-formula {
                    font-family: 'Courier New', monospace;
                }
                .math-value {
                    font-weight: bold;
                    margin-left: 4px;
                }
                .check-line {
                    display: flex;
                    justify-content: space-between;
                    font-weight: bold;
                    border-bottom: 1px dotted #ccc;
                }
                .text-green-600 { color: #008000; }
                .text-red-600 { color: #FF0000; }
            `}</style>
        </div>
    );
};