/**
 * Calculator Styles - V2
 * All calculator layout and component styles
 */

/* ===== LAYOUT ===== */
.calculator-header {
    max-width: 1400px;
    margin: 0 auto 20px auto;
    padding: 0 10px;
}

    .calculator-header .page-title {
        margin: 0;
        color: #1e293b;
        font-size: 28px;
        font-weight: 700;
    }

.calculator-grid-3col {
    display: grid;
    grid-template-columns: 350px 1fr 320px;
    gap: 20px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 10px;
}

/* Full-width reference image shown above the grid for calculators where the
   user needs to see a labeled diagram before filling in lettered dimensions
   or position-based fields (e.g. manhole reinforcement P1-P9 positions). */
.reference-image-full {
    max-width: 800px;
    margin: 0 auto 20px auto;
    padding: 0 10px;
    text-align: center;
}

    .reference-image-full img {
        max-width: 100%;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

/* Reference image placed inside the results column (above the result box)
   for calculators with no Rebar Positions column - e.g. quantity/volume
   calculators, where the image sits directly above its Grand Total result. */
.reference-image-in-result {
    margin-bottom: 16px;
}

    .reference-image-in-result img {
        max-width: 100%;
        width: 100%;
        max-height: 500px;
        object-fit: contain;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

/* Wide-input variant (reinforcement table pages): a genuine 2x2 grid -
   Dimensions sits beside the reference Image in the top row (so their tops
   align by construction, not by coincidental spacing), and Rebar Positions
   sits beside the Bar Schedule results in the bottom row. No info panel. */
.calculator-grid-3col.wide-input {
    grid-template-columns: 300px 360px 1fr;
    grid-template-areas:
        "dims image image"
        "dims positions result";
}

    /* Dimensions spans both rows on the left - a full-height column beside
       everything else, so its natural content height (however tall) always
       has room without needing sticky/scroll tricks. Normal document flow. */
    .calculator-grid-3col.wide-input .col-input {
        grid-area: dims;
        width: 300px;
        position: static;
        height: auto;
        max-height: none;
        overflow-y: visible;
    }

    /* Image spans both right-hand columns (Positions + Result width combined),
       so it renders wider - and therefore taller at the same aspect ratio -
       closing the vertical gap that appeared when it was confined to just
       the Result column's width. */
    .calculator-grid-3col.wide-input .grid-area-image {
        grid-area: image;
        align-self: start;
    }

        .calculator-grid-3col.wide-input .grid-area-image img {
            max-width: 100%;
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }

    .calculator-grid-3col.wide-input .col-positions {
        grid-area: positions;
        position: static;
        height: auto;
    }

    .calculator-grid-3col.wide-input .col-result {
        grid-area: result;
    }

/* No-info variant: two columns (Dimensions | Results), no info panel - for
   calculators with a full-width reference image above but no second input
   panel (e.g. the quantity/volume calculators). Keeps the results column
   starting at the same row as the dimension inputs, right below the image. */
.calculator-grid-3col.no-info {
    grid-template-columns: 350px 1fr;
}

/* ===== POSITIONS COLUMN (mirrors col-input styling) ===== */
.col-positions {
    width: 360px;
    position: sticky;
    top: 20px;
    align-self: start;
    height: fit-content;
    margin: 0;
    padding: 0;
}

    .col-positions .calculator-card {
        background: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border: 1px solid #e5e7eb;
        margin: 0;
    }

    .col-positions label {
        font-size: 15px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
        display: block;
    }

    .col-positions input,
    .col-positions select {
        width: 100%;
        padding: 10px 12px;
        font-size: 15px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        box-sizing: border-box;
    }

        .col-positions input:focus,
        .col-positions select:focus {
            border-color: #3b82f6;
            outline: none;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

/* ===== INPUT COLUMN ===== */
.col-input {
    width: 350px;
    position: sticky;
    top: 20px;
    align-self: start;
    height: fit-content;
    margin: 0;
    padding: 0;
}

    .col-input .calculator-card {
        background: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border: 1px solid #e5e7eb;
        margin: 0;
    }

    .col-input .input-group {
        margin-bottom: 18px;
    }

    .col-input label {
        font-size: 15px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
        display: block;
    }

    .col-input input,
    .col-input select {
        width: 100%;
        padding: 12px 14px;
        font-size: 16px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        box-sizing: border-box;
    }

        .col-input input:focus,
        .col-input select:focus {
            border-color: #3b82f6;
            outline: none;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

    .col-input .btn-calc {
        width: 100%;
        padding: 14px;
        margin-top: 10px;
        background: #2563eb;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
    }

        .col-input .btn-calc:hover {
            background: #1d4ed8;
        }

/* ===== RESULT COLUMN ===== */
.col-result {
    min-width: 0;
    align-self: start;
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

    .col-result > div {
        margin-top: 0;
        margin-bottom: 16px;
    }

        .col-result > div:first-child {
            margin-top: 0;
        }

/* ===== INFO COLUMN ===== */
.col-info {
    width: 320px;
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    font-size: 14px;
    align-self: start;
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    margin: 0;
}

    .col-info h3 {
        font-size: 15px;
        margin: 18px 0 10px 0;
        color: #1f2937;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 6px;
        font-weight: 600;
    }

        .col-info h3:first-child {
            margin-top: 0;
        }

/* ===== STEPS PANEL ===== */
#stepsPanel {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #86efac;
    display: none;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 2px solid #e5e7eb;
}

    #stepsPanel h3 {
        color: #059669;
        border-bottom: 1px solid #10b981;
        margin-top: 0;
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
    .calculator-grid-3col {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .col-input,
    .col-info,
    .col-result {
        width: 100%;
        position: static;
        height: auto;
    }

    .col-info,
    .col-result {
        max-height: none;
    }

    /* wide-input variant (Dimensions | Rebar Positions | Results) needs its
       own override here - its higher specificity (.calculator-grid-3col.wide-input)
       would otherwise beat the single-class rule above even inside this media
       query, keeping the fixed 300px/360px columns on a phone-width screen. */
    .calculator-grid-3col.wide-input {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "dims"
            "positions"
            "result";
    }

        .calculator-grid-3col.wide-input .col-input {
            width: 100%;
            max-height: none;
            overflow-y: visible;
        }

    .calculator-grid-3col.no-info {
        grid-template-columns: 1fr;
    }

    .col-positions {
        width: 100%;
        position: static;
        height: auto;
    }

    .reference-image-full {
        max-width: 100%;
    }
}

/* ===== COLUMN HEADINGS (input / results) ===== */
.col-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 0 12px 0;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    border-left-width: 4px;
    background: #fff;
}

.col-result > .col-heading {
    margin: 0 0 12px 0;
}

.col-heading-input {
    border-left-color: #2563eb;
    background: linear-gradient(90deg, #eff6ff 0%, #ffffff 100%);
}

.col-heading-result {
    border-left-color: #059669;
    background: linear-gradient(90deg, #ecfdf5 0%, #ffffff 100%);
}

.col-heading-icon {
    font-size: 20px;
    line-height: 1;
}

.col-heading-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #0f172a;
    line-height: 1.2;
}

.col-heading-input .col-heading-title {
    color: #1d4ed8;
}

.col-heading-result .col-heading-title {
    color: #047857;
}

.col-heading-sub {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.3;
}

/* ===== SPACING BETWEEN RESULT BLOCKS =====
   calculators draw their result boxes one after another; some boxes have no bottom margin
   (e.g. the small value cards grid), so the next box touched them */
#result > * + *,
#extraResults > * + * {
    margin-top: 16px;
}