/*!
 * Vijay TMT - BBS Quantity Calculator
 * Screen styles + a dedicated print sheet.
 * Colours reuse the site tokens declared in style.css (--theme-color etc.).
 */

/* ============================================================
   SCREEN
   ============================================================ */

.tmt-calc {
    --tmt-border: #e3e7ef;
    --tmt-ink: #0A2155;
    --tmt-muted: #757F95;
    --tmt-error: #c22626;
    --tmt-surface: #ffffff;
    --tmt-surface-alt: #f7f9fc;
}

.tmt-intro {
    max-width: 720px;
    margin: 0 auto 34px;
    text-align: center;
    color: var(--tmt-muted);
    font-size: 16px;
    line-height: 1.7;
}

/* ---------- tabs ---------- */

/* Wide enough that both full calculator names sit on a single line. */
.tmt-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 760px;
    margin: 0 auto 26px;
}

.tmt-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 11px 16px;
    border: 1px solid var(--tmt-border);
    border-radius: 11px;
    background: var(--tmt-surface);
    color: var(--tmt-ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    text-align: center;
    /* Splits a wrapped name into two even lines instead of a long one and an
       orphan; ignored by browsers that do not support it. */
    text-wrap: balance;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.tmt-tab:hover {
    border-color: #b9c2d4;
}

/* The selected tab is marked by more than colour: it is filled, and the
   underlying aria-selected state is what assistive tech reads. */
.tmt-tab.is-active {
    background: var(--theme-color, #d32c2c);
    border-color: var(--theme-color, #d32c2c);
    color: #fff;
}

/* ---------- preliminary fields ---------- */

.tmt-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.tmt-total-area {
    margin: 18px 0 0;
    padding: 12px 16px;
    background: var(--tmt-surface-alt);
    border-radius: 9px;
    color: var(--tmt-ink);
    font-size: 15px;
    font-weight: 600;
}

.tmt-disclaimer-strong {
    border-left-color: var(--theme-color, #d32c2c);
}

.tmt-card {
    background: var(--tmt-surface);
    border: 1px solid var(--tmt-border);
    border-radius: 14px;
    padding: 26px;
    margin-bottom: 24px;
    box-shadow: 0 2px 18px rgba(10, 33, 85, .05);
}

.tmt-card-head {
    margin-bottom: 18px;
}

.tmt-card-head h2 {
    font-size: 22px;
    color: var(--tmt-ink);
    margin: 0 0 6px;
    font-weight: 700;
}

.tmt-card-head p {
    margin: 0;
    color: var(--tmt-muted);
    font-size: 15px;
}

/* ---------- table ---------- */

.tmt-table-wrap {
    overflow-x: auto;
}

.tmt-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.tmt-table th,
.tmt-table td {
    padding: 10px 10px;
    text-align: left;
    vertical-align: top;
}

.tmt-table thead th {
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tmt-muted);
    font-weight: 600;
    border-bottom: 2px solid var(--tmt-border);
    white-space: nowrap;
}

.tmt-table tbody tr + tr td {
    border-top: 1px solid var(--tmt-border);
}

.tmt-derived {
    color: var(--tmt-ink);
    font-weight: 600;
    white-space: nowrap;
    padding-top: 20px !important;
}

/* ---------- inputs ---------- */

.tmt-input {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #d6dce8;
    border-radius: 9px;
    font-size: 16px;
    color: var(--tmt-ink);
    background: var(--tmt-surface);
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tmt-input::placeholder {
    color: #a9b2c4;
}

/* A native <select> does not sit in the same box as a text input: the OS draws
   its own arrow inside the right padding and centres the label to its own
   metrics, so the Diameter field ended up a couple of pixels out of line with
   the No. of Bars and Length fields beside it. Resetting the appearance and
   drawing our own chevron makes it the same box as its neighbours. */
select.tmt-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 46px;
    padding-right: 34px;
    line-height: 1.25;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23757F95' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px 7px;
}

/* IE / old Edge draw a second arrow of their own. */
select.tmt-input::-ms-expand {
    display: none;
}

.tmt-input:focus,
.tmt-calc button:focus-visible {
    outline: 3px solid rgba(211, 44, 44, .35);
    outline-offset: 1px;
    border-color: var(--theme-color, #d32c2c);
}

/* Errors are never signalled by colour alone: the border changes, an icon
   character is prefixed, and the message itself is read out. */
.tmt-input.is-invalid {
    border-color: var(--tmt-error);
    background-color: #fff6f6;
}

.tmt-dia-custom {
    margin-top: 8px;
}

.tmt-err {
    display: block;
    margin-top: 6px;
    color: var(--tmt-error);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
}

.tmt-err::before {
    content: "\26A0  ";
}

/* ---------- buttons ---------- */

.tmt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.tmt-btn-primary {
    background: var(--theme-color, #d32c2c);
    color: #fff;
}

.tmt-btn-primary:hover:not(:disabled) {
    background: #b52222;
}

.tmt-btn-outline {
    background: transparent;
    color: var(--tmt-ink);
    border-color: #ccd4e2;
}

.tmt-btn-outline:hover {
    border-color: var(--tmt-ink);
}

.tmt-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.tmt-add-row {
    margin-top: 16px;
}

.tmt-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid #e6d2d2;
    background: #fff;
    color: var(--tmt-error);
    border-radius: 9px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.tmt-remove:hover {
    background: #fff1f1;
    border-color: var(--tmt-error);
}

.tmt-remove-text {
    display: none;
    font-size: 14px;
    font-weight: 600;
}

/* ---------- wastage ---------- */

.tmt-wastage-field {
    max-width: 260px;
}

.tmt-label {
    display: block;
    font-weight: 600;
    color: var(--tmt-ink);
    margin-bottom: 6px;
    font-size: 16px;
}

.tmt-hint {
    display: block;
    color: var(--tmt-muted);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 8px;
}

.tmt-input-suffix {
    position: relative;
}

.tmt-input-suffix .tmt-input {
    padding-right: 38px;
}

.tmt-input-suffix span {
    position: absolute;
    right: 14px;
    top: 12px;
    color: var(--tmt-muted);
    font-weight: 600;
    pointer-events: none;
}

/* ---------- summary ---------- */

.tmt-summary {
    background: var(--tmt-surface-alt);
    border: 1px solid var(--tmt-border);
    border-radius: 14px;
    padding: 26px;
}

.tmt-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}

.tmt-stat {
    background: #fff;
    border: 1px solid var(--tmt-border);
    border-radius: 11px;
    padding: 16px 18px;
}

.tmt-stat dt {
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tmt-muted);
    font-weight: 600;
    margin-bottom: 6px;
}

.tmt-stat dd {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--tmt-ink);
    line-height: 1.25;
}

.tmt-stat-final {
    border-color: var(--theme-color, #d32c2c);
    background: #fff8f8;
}

.tmt-stat-final dd {
    color: var(--theme-color, #d32c2c);
}

/* Some tiles carry the same answer twice - kg and its tonnes conversion. Two
   equal-weight lines read as two competing figures, so the second is demoted to
   a quiet conversion line under the first. Tiles with a single dd are untouched,
   and this deliberately also overrides the highlight colour above. */
.tmt-stat dd + dd {
    margin-top: 3px;
    font-size: 14px;
    font-weight: 400;
    color: var(--tmt-muted);
}

.tmt-empty-hint {
    margin: 0 0 18px;
    color: var(--tmt-muted);
    font-size: 15px;
}

.tmt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.tmt-disclaimer {
    margin-top: 24px;
    padding: 16px 18px;
    border-left: 3px solid #ccd4e2;
    background: var(--tmt-surface-alt);
    color: var(--tmt-muted);
    font-size: 14px;
    line-height: 1.65;
    border-radius: 0 9px 9px 0;
}

/* Visible only to screen readers - used for live status announcements. */
.tmt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- mobile: table becomes stacked cards ---------- */

@media (max-width: 767px) {
    .tmt-card,
    .tmt-summary {
        padding: 18px;
    }

    .tmt-table-wrap {
        overflow-x: visible;
    }

    .tmt-table {
        min-width: 0;
    }

    .tmt-table thead {
        display: none;
    }

    .tmt-table,
    .tmt-table tbody,
    .tmt-table tr,
    .tmt-table td {
        display: block;
        width: auto;
    }

    /* Each stacked row is numbered by a CSS counter rather than by script, so
       adding and removing rows renumbers the cards with no JS involved. */
    .tmt-table tbody {
        counter-reset: tmt-bar;
    }

    /* Two columns rather than one field per line: the diameter select takes a
       full row, then the two short numeric fields pair up, and so do the two
       derived figures. Roughly a third off the height of every card. */
    .tmt-table tbody tr {
        counter-increment: tmt-bar;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
        border: 1px solid var(--tmt-border);
        border-radius: 12px;
        overflow: hidden;
        padding: 0 14px 12px;
        margin-bottom: 14px;
        background: var(--tmt-surface-alt);
    }

    /* The header row is hidden on mobile, so each card names itself instead -
       without this the cards are an unlabelled wall of fields. */
    .tmt-table tbody tr::before {
        content: "Bar " counter(tmt-bar);
        grid-column: 1 / -1;
        margin: 0 -14px 2px;
        padding: 8px 14px;
        background: #eaeff7;
        border-bottom: 1px solid var(--tmt-border);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .02em;
        color: var(--tmt-ink);
    }

    /* The diameter select needs the full width; everything after it pairs up
       two-per-row on its own. */
    .tmt-table tbody td:first-child {
        grid-column: 1 / -1;
    }

    .tmt-table tbody tr + tr td {
        border-top: 0;
    }

    .tmt-table td {
        padding: 8px 0 0;
    }

    .tmt-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 14px;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--tmt-muted);
        font-weight: 600;
        margin-bottom: 4px;
    }

    /* Grid places these two side by side; the old inline-block sizing would
       fight it. */
    .tmt-table td.tmt-derived {
        display: block;
        width: auto;
        padding-top: 10px !important;
    }

    .tmt-action-cell {
        grid-column: 1 / -1;
        padding-top: 10px !important;
        text-align: right;
    }

    .tmt-action-cell::before {
        content: none;
    }

    /* Removing a row is a secondary, destructive action - it should not carry
       the same weight as the full-width "Add Bar Size" button below the card. */
    .tmt-remove {
        width: auto;
        padding: 0 16px;
    }

    .tmt-remove-text {
        display: inline;
    }

    .tmt-actions .tmt-btn {
        flex: 1 1 100%;
    }

    /* Side by side is kept on mobile, so the type has to come down to let these
       long names settle into two lines inside half a phone's width. */
    .tmt-tabs {
        gap: 8px;
        margin-bottom: 20px;
    }

    .tmt-tab {
        min-height: 56px;
        padding: 10px 8px;
        font-size: 13px;
        line-height: 1.25;
    }

    /* Full width so it is an obvious tap target and reads as the next step. */
    .tmt-add-row {
        width: 100%;
    }

    /* ---- tighter vertical rhythm ----
       The desktop spacing costs most of a phone screen before any content is
       reached, so the section, cards and tiles are all pulled in. */
    .tmt-calc.pt-60 {
        padding-top: 36px;
    }

    .tmt-calc.pb-60 {
        padding-bottom: 36px;
    }

    .tmt-intro {
        margin-bottom: 24px;
        text-align: left;
    }

    .tmt-card {
        margin-bottom: 16px;
    }

    .tmt-card-head {
        margin-bottom: 14px;
    }

    .tmt-card-head h2 {
        font-size: 20px;
    }

    .tmt-summary-grid {
        gap: 12px;
    }

    .tmt-stat {
        padding: 14px 16px;
    }

    .tmt-field-grid {
        gap: 16px;
    }

    .tmt-actions {
        margin-top: 18px;
    }
}

/* Narrow phones: half the width is no longer enough for "Requirement
   Calculator" on one line, so the tab type drops one more step. */
@media (max-width: 380px) {
    .tmt-tab {
        font-size: 12px;
        padding: 10px 6px;
    }

    .tmt-tabs {
        gap: 6px;
    }
}

/* ============================================================
   PRINT SHEET
   ============================================================ */

/* Hidden on screen; only the print stylesheet reveals it. */
#tmt-print-sheet {
    display: none;
}

@media print {
    /* Show nothing but our own sheet. Written defensively against the site
       layout so stray wrappers, popups and the sticky header cannot leak in. */
    body > * {
        display: none !important;
    }

    body > main.main {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    main.main > * {
        display: none !important;
    }

    main.main #tmt-print-sheet {
        display: block !important;
    }

    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    @page {
        size: A4;
        margin: 14mm 12mm 16mm;
    }

    #tmt-print-sheet {
        font-family: Arial, Helvetica, sans-serif;
        color: #10182c;
        font-size: 11pt;
        line-height: 1.45;
        /* Without this the brand rules and table shading are dropped unless the
           user happens to tick "Background graphics" in the print dialog. */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* --- header ---
       The logo and the date block are different widths, so any layout that sizes
       the title against them - flex, or grid tracks - centres it on the gap
       between the two rather than on the sheet. The title is therefore taken out
       of the flow and stretched across the full header, where text-align puts it
       on the sheet's true centre no matter what sits either side of it. */
    .tmt-print-head {
        position: relative;
        min-height: 56px;
        padding-bottom: 10px;
        /* Two rules, not one: the thin navy line under the red keeps the
           masthead from looking like a stray underline on plain paper. */
        border-bottom: 2.5px solid #d32c2c;
        box-shadow: 0 2.5px 0 #0A2155;
        margin-bottom: 18px;
        text-align: center;
    }

    /* The title is the one thing that has to sit dead centre, so it is the one
       thing left in normal flow: an ordinary full-width block, centred by plain
       text-align. The logo and the date are lifted out to the corners around it,
       where their differing widths can no longer drag it off centre. No flex or
       grid track sizing is involved, so nothing can shift it. */
    .tmt-print-title {
        padding: 3px 0;
    }

    .tmt-print-logo {
        position: absolute;
        left: 0;
        top: 0;
        height: 52px;
        width: auto;
    }

    .tmt-print-title h2 {
        margin: 0;
        font-size: 19pt;
        font-weight: 700;
        letter-spacing: .01em;
        color: #0A2155;
    }

    .tmt-print-title p {
        margin: 3px 0 0;
        font-size: 9.5pt;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: #5a6379;
    }

    .tmt-print-meta {
        position: absolute;
        right: 0;
        top: 2px;
        text-align: right;
        font-size: 10.5pt;
        font-weight: 700;
        color: #0A2155;
    }

    .tmt-print-meta span {
        display: block;
        color: #6b7488;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-size: 8pt;
    }

    /* --- tables ---
       Both tables share one skin so the sheet reads as a single document: a
       tinted, ruled header band, hairline grid, and a caption that acts as the
       section title. No cell puts white text on a colour - a printer set to drop
       background graphics has to leave every figure legible. */
    .tmt-print-table,
    .tmt-print-totals {
        width: 100%;
        border-collapse: collapse;
    }

    .tmt-print-table {
        margin-bottom: 16px;
    }

    .tmt-print-table caption,
    .tmt-print-totals caption {
        caption-side: top;
        text-align: left;
        font-size: 8.5pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: #0A2155;
        padding: 0 0 5px 8px;
        border-left: 3px solid #d32c2c;
        margin-bottom: 5px;
    }

    .tmt-print-table th,
    .tmt-print-table td,
    .tmt-print-totals th,
    .tmt-print-totals td {
        border: 1px solid #d5dae5;
        padding: 5.5px 8px;
        text-align: left;
        font-size: 10pt;
    }

    .tmt-print-table thead th {
        background: #e8edf7 !important;
        border-bottom: 1.5px solid #0A2155;
        color: #0A2155;
        font-size: 8.5pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        line-height: 1.3;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Units belong with the column, not in every cell - repeating "m" and "kg"
       down the rows is what made the figures hard to compare at a glance. */
    .tmt-print-table thead th small {
        display: block;
        font-size: 7.5pt;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: #5a6379;
    }

    .tmt-print-table .num,
    .tmt-print-totals .num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .tmt-print-table .idx {
        width: 6%;
        text-align: center;
        color: #6b7488;
    }

    .tmt-print-table .dia {
        font-weight: 700;
        color: #0A2155;
    }

    /* Banding, not heavier rules, is what keeps a long schedule readable. */
    .tmt-print-table tbody tr:nth-child(even) td {
        background: #f7f9fd !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .tmt-print-table tbody tr.total-row th,
    .tmt-print-table tbody tr.total-row td {
        background: #eef2fa !important;
        border-top: 1.5px solid #0A2155;
        font-weight: 700;
        color: #0A2155;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Repeat the header on every page and never split a row across pages. */
    .tmt-print-table thead {
        display: table-header-group;
    }

    .tmt-print-table tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* --- summary + headline figure ---
       Both sheets read the same way: the breakdown across the full width, then
       the one number the reader came for banded underneath it. */
    .tmt-print-totals {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .tmt-print-totals-wide {
        width: 100%;
        margin: 4px 0 0;
    }

    .tmt-print-totals th {
        width: 58%;
        font-weight: 600;
        background: #f6f8fc !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Spans the sheet under the summary: label on one side, figures on the
       other, so the eye lands on the total without hunting for it. */
    .tmt-print-grand {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-top: 14px;
        padding: 10px 14px;
        text-align: right;
        background: #fdf3f3 !important;
        border: 1px solid #e8c3c3;
        border-left: 4px solid #d32c2c;
        page-break-inside: avoid;
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .tmt-print-grand-label {
        font-size: 10pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #0A2155;
        text-align: left;
    }

    .tmt-print-grand strong {
        display: block;
        margin-top: 3px;
        font-size: 17pt;
        line-height: 1.15;
        font-weight: 700;
        color: #a81f1f;
        font-variant-numeric: tabular-nums;
    }

    .tmt-print-grand strong small {
        font-size: 11pt;
        font-weight: 600;
    }

    .tmt-print-grand em {
        display: block;
        font-style: normal;
        margin-top: 1px;
        font-size: 10pt;
        font-weight: 600;
        color: #0A2155;
    }

    .tmt-print-note {
        margin: 14px 0 0;
        padding: 8px 10px;
        background: #f6f8fc !important;
        border-left: 3px solid #0A2155;
        font-size: 8.5pt;
        line-height: 1.5;
        color: #4d5568;
        page-break-inside: avoid;
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* --- footer ---
       Flows after the content instead of being fixed, so it can never
       overlap a long schedule. */
    .tmt-print-foot {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 14px;
        margin-top: 18px;
        padding-top: 10px;
        border-top: 1.5px solid #d32c2c;
        page-break-inside: avoid;
        break-inside: avoid;
        font-size: 9.5pt;
    }

    .tmt-print-foot-brand strong {
        display: block;
        font-size: 11pt;
        color: #0A2155;
    }

    .tmt-print-foot-brand span {
        color: #5a6379;
    }

    .tmt-print-foot-contact {
        text-align: right;
        font-weight: 700;
        color: #0A2155;
        white-space: nowrap;
    }
}