/* ═══════════════════════════════════════════════════════════════════════════
   כתב כמויות — Bill of Quantities Calculator
   Design: Architectural minimalist · Construction document · RTL Hebrew
   Tokens: same palette as root site (Slate #2f2f2f · Bronze #9a7b4f · Off-White #f9f9f9)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ────────────────────────────────────────────────────────────── */
:root {
    --c-slate:       #2f2f2f;
    --c-slate-mid:   #4a4a4a;
    --c-slate-light: #777;
    --c-offwhite:    #f9f9f9;
    --c-white:       #ffffff;
    --c-bronze:      #9a7b4f;
    --c-bronze-dk:   #7d6239;
    --c-bronze-pale: #f7f1e8;
    --c-line:        #e2ddd7;
    --c-line-dark:   #ccc5bb;
    --c-row-active:  rgba(154,123,79,.07);
    --c-row-hover:   rgba(47,47,47,.03);

    --hdr-h:         58px;
    --ftr-h:         60px;
    --sidebar-w:     220px;

    --font:          'Heebo', 'Assistant', Arial, sans-serif;
    --mono:          'Heebo', 'Consolas', monospace;
    --radius:        2px;
    --t:             160ms cubic-bezier(.4,0,.2,1);

    /* Row grid: # | name | unit | price | qty | total */
    --row-cols:      36px 1fr 72px 96px 116px 96px;
}

/* ── 2. Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
    font-family: var(--font);
    direction: rtl;
    background: var(--c-offwhite);
    color: var(--c-slate);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-y: scroll;
}
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button { font-family: var(--font); cursor: pointer; }

/* ── 3. Shell ─────────────────────────────────────────────────────────────── */
.meh-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* ── 4. Header ────────────────────────────────────────────────────────────── */
.meh-header {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--hdr-h);
    background: var(--c-slate);
    border-bottom: 1px solid rgba(154,123,79,.22);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding-inline: 1.5rem;
}

.meh-header__brand {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}
.meh-header__logo {
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-bronze);
    font-weight: 700;
}
.meh-header__title {
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.01em;
}

.meh-search-wrap {
    position: relative;
    max-width: 380px;
    margin-inline: auto;
    width: 100%;
}
.meh-search-wrap::before {
    content: '⌕';
    position: absolute;
    inset-inline-end: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.4);
    font-size: 1.1rem;
    pointer-events: none;
}
#meh-search {
    width: 100%;
    padding: .45rem .85rem .45rem 2.2rem;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius);
    color: #fff;
    font-family: var(--font);
    font-size: .9rem;
    direction: rtl;
    outline: none;
    transition: border var(--t), background var(--t);
}
#meh-search::placeholder { color: rgba(255,255,255,.38); }
#meh-search:focus {
    background: rgba(255,255,255,.13);
    border-color: rgba(154,123,79,.6);
}

.meh-header__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}
.meh-hdr-label {
    font-size: .65rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}
.meh-hdr-num {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--c-bronze);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* ── 5. Body: sidebar + main ──────────────────────────────────────────────── */
.meh-body {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    flex: 1;
}

/* ── 6. Sidebar ───────────────────────────────────────────────────────────── */
.meh-sidebar {
    background: var(--c-white);
    border-inline-start: 1px solid var(--c-line);
    position: sticky;
    top: var(--hdr-h);
    height: calc(100vh - var(--hdr-h) - var(--ftr-h));
    overflow-y: auto;
    padding-block: 1.25rem;
    align-self: start;
}
.meh-sidebar__label {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--c-slate-light);
    padding-inline: 1.1rem;
    margin-bottom: .6rem;
}
.meh-cats { padding: 0; }
.meh-cat-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: right;
    padding: .5rem 1.1rem;
    background: none;
    border: none;
    border-inline-start: 3px solid transparent;
    font-size: .9rem;
    color: var(--c-slate-mid);
    transition: all var(--t);
    gap: .5rem;
}
.meh-cat-btn:hover {
    background: var(--c-row-hover);
    color: var(--c-slate);
}
.meh-cat-btn.active {
    background: var(--c-bronze-pale);
    color: var(--c-slate);
    border-inline-start-color: var(--c-bronze);
    font-weight: 700;
}
.meh-cat-btn__count {
    font-size: .72rem;
    color: var(--c-slate-light);
    font-variant-numeric: tabular-nums;
    min-width: 20px;
    text-align: center;
    background: var(--c-offwhite);
    border-radius: 10px;
    padding: 1px 5px;
}
.meh-cat-btn.active .meh-cat-btn__count {
    background: rgba(154,123,79,.18);
    color: var(--c-bronze-dk);
}

/* ── 7. Main / items area ─────────────────────────────────────────────────── */
.meh-main {
    padding-bottom: calc(var(--ftr-h) + 1rem);
    min-width: 0;
}

/* Sticky column header row */
.meh-thead {
    position: sticky;
    top: var(--hdr-h);
    z-index: 20;
    background: var(--c-slate);
    border-bottom: 2px solid var(--c-bronze);
}
.meh-thead__grid {
    display: grid;
    grid-template-columns: var(--row-cols);
    padding-inline: 1rem;
    height: 38px;
    align-items: center;
    gap: 0;
}
.meh-thead__grid span {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    padding-inline-end: .5rem;
}
.meh-thead__grid .col-total { color: var(--c-bronze); }
.meh-thead__grid .col-qty   { color: rgba(255,255,255,.8); }

/* ── 8. Sections ──────────────────────────────────────────────────────────── */
.meh-section { border-bottom: 1px solid var(--c-line); }
.meh-section__head {
    display: grid;
    grid-template-columns: var(--row-cols);
    padding-inline: 1rem;
    padding-block: .55rem;
    background: var(--c-offwhite);
    border-bottom: 1px solid var(--c-line);
    align-items: center;
}
.meh-section__name {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--c-bronze);
    grid-column: 1 / 4;
}
.meh-section__subtotal-label {
    font-size: .7rem;
    color: var(--c-slate-light);
    text-align: start;
}
.meh-section__subtotal-val {
    font-size: .82rem;
    font-weight: 700;
    color: var(--c-slate-mid);
    font-variant-numeric: tabular-nums;
    text-align: start;
}

/* ── 9. Item rows ─────────────────────────────────────────────────────────── */
.meh-row {
    display: grid;
    grid-template-columns: var(--row-cols);
    padding-inline: 1rem;
    min-height: 46px;
    align-items: center;
    border-bottom: 1px solid var(--c-line);
    background: var(--c-white);
    transition: background var(--t);
    gap: 0;
}
.meh-row:hover { background: var(--c-row-hover); }
.meh-row.meh-row--active {
    background: var(--c-row-active);
    border-bottom-color: rgba(154,123,79,.18);
}
.meh-row.meh-row--active .meh-row__total {
    color: var(--c-bronze-dk);
    font-weight: 700;
}

.col-num {
    font-size: .72rem;
    color: var(--c-slate-light);
    font-variant-numeric: tabular-nums;
    padding-inline-end: .5rem;
}
.meh-row__name {
    font-size: .9rem;
    color: var(--c-slate);
    padding-inline-end: .75rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.meh-row__subcat {
    font-size: .68rem;
    color: var(--c-slate-light);
    font-weight: 400;
}
.meh-row__mob-meta {
    display: none; /* shown only via @media mobile rule */
    font-size: .74rem;
    color: var(--c-slate-light);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: plaintext;
}
.meh-row__unit {
    font-size: .8rem;
    color: var(--c-slate-mid);
    padding-inline-end: .5rem;
}
.meh-row__price {
    font-size: .85rem;
    color: var(--c-slate-mid);
    font-variant-numeric: tabular-nums;
    padding-inline-end: .5rem;
    direction: ltr;
    unicode-bidi: plaintext;
}
.meh-row__total {
    font-size: .88rem;
    color: var(--c-slate-light);
    font-variant-numeric: tabular-nums;
    text-align: start;
    direction: ltr;
    unicode-bidi: plaintext;
    transition: color var(--t);
}

/* ── 10. Quantity input ───────────────────────────────────────────────────── */
.meh-qty-input {
    width: 88px;
    height: 34px;
    padding: 0 .6rem;
    text-align: center;
    font-family: var(--font);
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
    color: var(--c-slate);
    background: var(--c-white);
    border: 1px solid var(--c-line-dark);
    border-radius: var(--radius);
    outline: none;
    transition: border var(--t), box-shadow var(--t);
    -moz-appearance: textfield;
}
.meh-qty-input::-webkit-outer-spin-button,
.meh-qty-input::-webkit-inner-spin-button { opacity: .5; }
.meh-qty-input:focus {
    border-color: var(--c-bronze);
    box-shadow: 0 0 0 3px rgba(154,123,79,.15);
    background: #fff;
}
.meh-row--active .meh-qty-input {
    border-color: var(--c-bronze);
    background: var(--c-bronze-pale);
}

/* ── 11. Empty state ──────────────────────────────────────────────────────── */
.meh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    color: var(--c-slate-light);
    gap: 1rem;
    text-align: center;
}
.meh-empty__icon { font-size: 3rem; opacity: .3; }

/* ── 12. Footer ───────────────────────────────────────────────────────────── */
.meh-footer {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 30;
    height: var(--ftr-h);
    background: var(--c-slate);
    border-top: 2px solid var(--c-bronze);
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    padding-inline: 1.5rem;
    gap: 1.5rem;
    transform: translateY(calc(var(--ftr-h) + 2px));
    transition: transform 280ms cubic-bezier(.4,0,.2,1);
}
.meh-footer.visible { transform: translateY(0); }

.meh-footer__info {
    font-size: .82rem;
    color: rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.meh-footer__info strong { color: rgba(255,255,255,.9); }

.meh-footer__total {
    font-size: .88rem;
    color: rgba(255,255,255,.7);
    white-space: nowrap;
}
.meh-footer__total strong {
    font-size: 1.1rem;
    color: var(--c-bronze);
    font-variant-numeric: tabular-nums;
    margin-inline-start: .35rem;
}

.meh-footer__actions { display: flex; gap: .6rem; flex-shrink: 0; }

/* ── 13. Buttons ──────────────────────────────────────────────────────────── */
.meh-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1.1rem;
    font-size: .86rem;
    font-family: var(--font);
    font-weight: 700;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--t);
    white-space: nowrap;
}
.meh-btn--primary {
    background: var(--c-bronze);
    color: #fff;
    border-color: var(--c-bronze);
}
.meh-btn--primary:hover { background: var(--c-bronze-dk); border-color: var(--c-bronze-dk); }
.meh-btn--ghost {
    background: transparent;
    color: rgba(255,255,255,.55);
    border-color: rgba(255,255,255,.2);
}
.meh-btn--ghost:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.meh-btn--secondary {
    background: var(--c-offwhite);
    color: var(--c-slate);
    border-color: var(--c-line-dark);
}
.meh-btn--secondary:hover { background: var(--c-line); }
.meh-btn--wa {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
}
.meh-btn--wa:hover { background: #1ebe5d; }

/* ── 14. Modal ────────────────────────────────────────────────────────────── */
.meh-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(47,47,47,.72);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.meh-modal.open { display: flex; }

.meh-modal__box {
    background: var(--c-white);
    width: 100%;
    max-width: 820px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    border-top: 3px solid var(--c-bronze);
    overflow: hidden;
}
.meh-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--c-line);
    flex-shrink: 0;
}
.meh-modal__header h2 {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--c-slate);
}
.meh-modal__close {
    width: 32px; height: 32px;
    background: none;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    font-size: 1.1rem;
    color: var(--c-slate-mid);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--t);
}
.meh-modal__close:hover { background: var(--c-offwhite); color: var(--c-slate); }

/* ── 15. Quote document ───────────────────────────────────────────────────── */
.quote-scroll { flex: 1; overflow-y: auto; padding: 1.5rem; }

.quote-letterhead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--c-slate);
}
.quote-co-name {
    display: block;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--c-slate);
}
.quote-co-sub {
    display: block;
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-bronze);
    margin-top: 2px;
}
.quote-meta {
    text-align: start;
    font-size: .82rem;
    color: var(--c-slate-mid);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.quote-meta strong { color: var(--c-slate); }

/* Inline editable fields */
.quote-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.quote-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.quote-field label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-slate-light);
}
.quote-inline-input {
    padding: .42rem .65rem;
    font-family: var(--font);
    font-size: .9rem;
    color: var(--c-slate);
    border: 1px solid var(--c-line-dark);
    border-radius: var(--radius);
    background: var(--c-offwhite);
    direction: rtl;
    outline: none;
    transition: border var(--t);
}
.quote-inline-input:focus { border-color: var(--c-bronze); background: #fff; }

/* Quote table */
.quote-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    margin-bottom: 1rem;
}
.quote-table th {
    text-align: right;
    padding: .55rem .75rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    background: var(--c-slate);
    border-bottom: 2px solid var(--c-bronze);
}
.quote-table td {
    padding: .58rem .75rem;
    border-bottom: 1px solid var(--c-line);
    vertical-align: middle;
}
.quote-cat-row td {
    background: var(--c-offwhite);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-bronze);
    padding: .45rem .75rem;
    border-bottom: 2px solid var(--c-line);
}
.q-num   { width: 36px; color: var(--c-slate-light); font-variant-numeric: tabular-nums; }
.q-name  { font-weight: 500; }
.q-unit  { width: 70px; color: var(--c-slate-mid); }
.q-qty, .q-uprice, .q-total {
    width: 88px;
    text-align: start;
    direction: ltr;
    unicode-bidi: plaintext;
    font-variant-numeric: tabular-nums;
}
.q-total { font-weight: 600; }

/* tfoot rows */
.quote-subtotal-row td, .quote-vat-row td { border-top: 1px solid var(--c-line-dark); font-size: .85rem; }
.quote-subtotal-row td:first-child, .quote-vat-row td:first-child { color: var(--c-slate-mid); }
.quote-grand-row td {
    border-top: 2px solid var(--c-slate);
    font-size: .95rem;
    font-weight: 900;
    padding-block: .8rem;
}
.q-grand { color: var(--c-bronze); font-size: 1.05rem; }

/* Terms */
.quote-terms {
    padding: .85rem;
    background: var(--c-offwhite);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    font-size: .74rem;
    color: var(--c-slate-light);
    line-height: 1.8;
}

/* Modal action bar */
.meh-modal__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.5rem;
    border-top: 1px solid var(--c-line);
    background: var(--c-offwhite);
    flex-shrink: 0;
    gap: 1rem;
    flex-wrap: wrap;
}
.meh-modal__actions-right { display: flex; gap: .6rem; }

.meh-vat-toggle {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: var(--c-slate-mid);
    cursor: pointer;
}
.meh-vat-toggle input { accent-color: var(--c-bronze); width: 15px; height: 15px; }

/* ── 16. Responsive: mobile cards ─────────────────────────────────────────── */
@media (max-width: 820px) {
    .meh-body { grid-template-columns: 1fr; }
    .meh-sidebar {
        position: static;
        height: auto;
        border: none;
        border-bottom: 1px solid var(--c-line);
        padding-block: .5rem;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .meh-sidebar__label { display: none; }
    .meh-cats {
        display: flex;
        flex-direction: row;
        gap: .4rem;
        padding-inline: 1rem;
        white-space: nowrap;
    }
    .meh-cat-btn {
        padding: .35rem .9rem;
        border-radius: 20px;
        border: 1px solid var(--c-line-dark);
        border-inline-start: 1px solid var(--c-line-dark);
        background: var(--c-white);
        font-size: .82rem;
        flex-shrink: 0;
    }
    .meh-cat-btn.active {
        background: var(--c-bronze);
        color: #fff;
        border-color: var(--c-bronze);
    }
    .meh-cat-btn__count { display: none; }

    /* Hide construction grid header on mobile */
    .meh-thead { display: none; }

    /* Compact section header on mobile */
    .meh-section__head { display: block; padding: .5rem 1rem; }
    .meh-section__name { font-size: .75rem; }
    .meh-section__subtotal-label,
    .meh-section__subtotal-val { font-size: .75rem; display: inline; }

    /* Mobile rows: 2-row explicit grid (no display:block tricks) */
    .meh-row {
        grid-template-columns: 1fr auto auto;
        grid-template-rows: auto auto;
        gap: .3rem .5rem;
        padding: .7rem 1rem;
        align-items: center;
    }
    /* Hide desktop-only columns */
    .meh-row .col-num,
    .meh-row .meh-row__unit,
    .meh-row .meh-row__price { display: none; }

    /* Name spans full width on row 1 */
    .meh-row .meh-row__name  { grid-column: 1 / 4; grid-row: 1; font-size: .93rem; font-weight: 600; }

    /* Qty input and total on row 2 */
    .meh-row .meh-qty-input  { grid-column: 2; grid-row: 2; width: 76px; }
    .meh-row .meh-row__total { grid-column: 3; grid-row: 2; min-width: 68px; text-align: start; font-size: .88rem; }

    /* Mobile meta (₪price / unit) shown only on mobile inside name div */
    .meh-row__mob-meta { display: block; }

    .meh-header { grid-template-columns: 1fr auto; gap: .75rem; padding-inline: 1rem; }
    .meh-header__total { display: none; }

    .meh-footer { grid-template-columns: 1fr auto; }
    .meh-footer__info { display: none; }

    .quote-fields { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .meh-header__brand .meh-header__logo { display: none; }
    .meh-footer__total { font-size: .8rem; }
    .meh-btn { padding: .4rem .8rem; font-size: .8rem; }
}

/* ── 17. Print ────────────────────────────────────────────────────────────── */
@media print {
    .meh-shell,
    .meh-footer,
    .no-print { display: none !important; }

    .meh-modal {
        display: block !important;
        position: static;
        background: none;
        padding: 0;
    }
    .meh-modal__box {
        max-height: none;
        overflow: visible;
        border-top: none;
        box-shadow: none;
        max-width: 100%;
    }
    .meh-modal__header,
    .meh-modal__actions { display: none !important; }

    .quote-scroll { overflow: visible; padding: 0.5cm; }

    .quote-letterhead { border-bottom: 2px solid #000; }
    .quote-table th { background: #2f2f2f; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .quote-cat-row td { background: #f4f4f4 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    @page { size: A4; margin: 1.5cm 1.5cm 2cm; }
}