/* ═══════════════════════════════════════════════════════════════
   LETTERHEAD  —  Shared document styles
   Used by: invoice_receipt · quotation_receipt · delivery_note_receipt
   ═══════════════════════════════════════════════════════════════ */

:root {
    --lh-navy:       #0c1f3f;
    --lh-navy-mid:   #1a2f50;
    --lh-gold:       #c9a84c;
    --lh-gold-light: #e8d49e;
    --lh-gold-faint: #faf4e6;
    --lh-text:       #1a202c;
    --lh-muted:      #718096;
    --lh-border:     #e2e8f0;
    --lh-surface:    #f7fafc;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: var(--lh-text);
    background: #d8dfe8;
    line-height: 1.55;
}

/* ─── Screen toolbar ──────────────────────────────────────────── */
.lh-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    background: var(--lh-navy);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
    border-bottom: 2px solid var(--lh-gold);
}
.lh-toolbar .lt-ref        { flex: 1; color: #a0aec0; font-size: 12px; }
.lh-toolbar .lt-ref strong { color: #fff; font-size: 14px; margin-right: 6px; }

.lh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: .3px;
    transition: filter .15s, transform .1s;
}
.lh-btn:active { transform: scale(.97); }
.lh-btn-print { background: var(--lh-gold); color: var(--lh-navy); }
.lh-btn-print:hover { filter: brightness(1.1); }
.lh-btn-ghost { background: transparent; color: #a0aec0; border: 1px solid #4a5568; }
.lh-btn-ghost:hover { color: #e2e8f0; border-color: #718096; }

/* ─── Page wrapper ────────────────────────────────────────────── */
.lh-wrap {
    max-width: 860px;
    margin: 28px auto 48px;
    padding: 0 14px;
}

/* ─── Document card ───────────────────────────────────────────── */
.lh-doc {
    background: #fff;
    box-shadow: 0 4px 28px rgba(0,0,0,.13);
    overflow: hidden;
    position: relative;
}

/* Left gold accent strip */
.lh-doc::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, var(--lh-gold) 0%, #a07828 100%);
    z-index: 20;
}

/* Top-right corner gold triangle */
.lh-doc::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 52px; height: 52px;
    background: var(--lh-gold);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    z-index: 21;
    opacity: .85;
}

/* ═══════════════════════════════════════════════════════════════
   LETTERHEAD TOP BAND
   ═══════════════════════════════════════════════════════════════ */
.lh-head {
    background: var(--lh-navy);
    display: flex;
    align-items: center;
    padding: 26px 48px 26px 44px;
    position: relative;
    overflow: hidden;
    min-height: 106px;
    gap: 0;
}

/* Diagonal sheen — subtle lighter blue on the left portion */
.lh-head .lh-head-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(255,255,255,.04) 0%, transparent 50%);
    pointer-events: none;
}

/* Translucent gold panel covering the right ~40% with diagonal left edge */
.lh-head-gold-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 42%;
    background: rgba(201,168,76,.11);
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
    pointer-events: none;
}

/* Crisp gold diagonal divider line */
.lh-head-divider {
    position: absolute;
    top: 0; bottom: 0;
    right: calc(40% + 2px);
    width: 2px;
    background: linear-gradient(180deg, transparent 0%, var(--lh-gold) 15%, var(--lh-gold) 85%, transparent 100%);
    transform: skewX(-7deg);
    opacity: .9;
}

/* Logo */
.lh-logo {
    flex-shrink: 0;
    margin-right: 20px;
    position: relative;
    z-index: 2;
}
.lh-logo img {
    display: block;
    max-height: 58px;
    max-width: 130px;
    object-fit: contain;
    filter: drop-shadow(0 1px 6px rgba(0,0,0,.45));
}

/* Company info */
.lh-co {
    flex: 1;
    position: relative;
    z-index: 2;
    min-width: 0;
}
.lh-co-name {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    letter-spacing: .2px;
}
.lh-co-rule {
    width: 36px;
    height: 2px;
    background: var(--lh-gold);
    margin: 6px 0;
    border-radius: 1px;
}

/* Document type block */
.lh-dt {
    width: 38%;
    text-align: right;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    padding-left: 24px;
}
.lh-dt-word {
    font-size: 27px;
    font-weight: 800;
    color: var(--lh-gold);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    line-height: 1;
}
.lh-dt-num {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    margin-top: 6px;
    letter-spacing: .3px;
}
.lh-dt-num strong {
    font-size: 14px;
    color: rgba(255,255,255,.9);
}

/* ─── Gold gradient rules ──────────────────────────────────────── */
.lh-rule {
    height: 4px;
    background: linear-gradient(90deg,
        var(--lh-navy)  0%,
        var(--lh-gold)  20%,
        var(--lh-gold-light) 50%,
        var(--lh-gold)  80%,
        var(--lh-navy)  100%
    );
}
.lh-rule-sm {
    height: 2px;
    background: linear-gradient(90deg,
        var(--lh-navy)  0%,
        var(--lh-gold)  20%,
        var(--lh-gold-light) 50%,
        var(--lh-gold)  80%,
        var(--lh-navy)  100%
    );
}

/* ═══════════════════════════════════════════════════════════════
   SECTION — FROM / BILL TO
   ═══════════════════════════════════════════════════════════════ */
.lh-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--lh-border);
}

.lh-party {
    padding: 22px 36px 22px 44px;
}
.lh-party.lh-pto {
    padding-left: 30px;
    border-left: 1px solid var(--lh-border);
    background: var(--lh-surface);
}

.lh-plabel {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--lh-gold);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--lh-gold-faint);
}
.lh-pname {
    font-size: 14px;
    font-weight: 700;
    color: var(--lh-text);
    margin-bottom: 7px;
}
.lh-pline {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--lh-muted);
    margin-bottom: 4px;
    line-height: 1.4;
}
.lh-pline i { margin-top: 2px; flex-shrink: 0; font-size: 10px; color: #a0aec0; }

/* Services sub-block inside FROM */
.lh-svc-sep { border: none; border-top: 1px dashed #cbd5e0; margin: 12px 0; }
.lh-svc-lbl {
    font-size: 9px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--lh-muted); margin-bottom: 5px;
}
.lh-svc-txt {
    font-size: 12px;
    color: var(--lh-muted);
    line-height: 1.6;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION — META STRIP
   ═══════════════════════════════════════════════════════════════ */
.lh-meta { display: flex; background: var(--lh-navy-mid); }
.lh-mc {
    flex: 1;
    padding: 13px 18px;
    border-right: 1px solid rgba(255,255,255,.07);
}
.lh-mc:last-child { border-right: none; }
.lh-mc-lbl {
    font-size: 9px; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--lh-gold-light);
    margin-bottom: 3px;
    opacity: .75;
}
.lh-mc-val {
    font-size: 13px; font-weight: 600;
    color: #f7fafc;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION — ITEMS TABLE
   ═══════════════════════════════════════════════════════════════ */
.lh-table-wrap { padding: 22px 36px 0 44px; }
.lh-table { width: 100%; border-collapse: collapse; }

.lh-table thead th {
    padding: 9px 10px;
    font-size: 9px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--lh-muted);
    border-bottom: 2px solid var(--lh-gold);
    text-align: left;
    background: transparent;
}
.lh-table thead th.r { text-align: right; }
.lh-table thead th.c { text-align: center; }

.lh-table tbody tr { border-bottom: 1px solid var(--lh-border); }
.lh-table tbody tr:last-child { border-bottom: 2px solid #d0d9e4; }
.lh-table tbody tr:nth-child(even) td { background: var(--lh-surface); }
.lh-table tbody td {
    padding: 10px 10px;
    font-size: 13px;
    color: var(--lh-text);
    vertical-align: middle;
}
.lh-table tbody td.r   { text-align: right; }
.lh-table tbody td.c   { text-align: center; }
.lh-table tbody td.desc { font-weight: 500; }
.lh-table tbody td.amt  { font-weight: 600; color: var(--lh-navy); }

/* Row number badge */
.lh-rn {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 20px; height: 20px;
    background: var(--lh-gold-faint);
    color: #7a5c10;
    border-radius: 50%;
    font-size: 10px; font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION — TOTALS
   ═══════════════════════════════════════════════════════════════ */
.lh-totals-wrap {
    padding: 6px 36px 24px 44px;
    display: flex;
    justify-content: flex-end;
}
.lh-totals { width: 296px; }

.lh-tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    font-size: 13px;
    color: #4a5568;
    border-bottom: 1px solid var(--lh-border);
}
.lh-tr:last-child { border-bottom: none; }
.lh-tr.grand {
    background: var(--lh-navy);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    margin-top: 6px;
    padding: 12px 12px;
}
.lh-tr.grand .g-sub {
    display: block;
    font-size: 9px; font-weight: 400;
    color: var(--lh-gold);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION — NOTES + VALIDITY
   ═══════════════════════════════════════════════════════════════ */
.lh-bottom {
    display: grid;
    grid-template-columns: 1fr 200px;
    border-top: 1px solid var(--lh-border);
    background: var(--lh-surface);
}
.lh-notes {
    padding: 20px 28px 20px 44px;
    border-right: 1px solid var(--lh-border);
}
.lh-notes-lbl {
    font-size: 9px; font-weight: 700;
    letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--lh-gold); margin-bottom: 7px;
}
.lh-notes-txt { font-size: 12px; color: #4a5568; line-height: 1.65; }

.lh-validity {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lh-validity-lbl {
    font-size: 9px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--lh-muted); margin-bottom: 5px;
}
.lh-validity-date { font-size: 15px; font-weight: 700; color: var(--lh-text); }
.lh-validity-note { font-size: 11px; color: #a0aec0; margin-top: 4px; font-style: italic; }

/* ═══════════════════════════════════════════════════════════════
   SECTION — SIGNATURES
   ═══════════════════════════════════════════════════════════════ */
.lh-sig {
    display: flex;
    gap: 48px;
    padding: 18px 36px 24px 44px;
}
.lh-sig-slot { flex: 1; max-width: 210px; }
.lh-sig-line {
    height: 38px;
    border-bottom: 1px solid #b8c4d0;
    margin-bottom: 6px;
}
.lh-sig-lbl {
    font-size: 9px;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: .9px;
}

/* ═══════════════════════════════════════════════════════════════
   LETTERHEAD BOTTOM BAND
   ═══════════════════════════════════════════════════════════════ */
.lh-foot {
    background: var(--lh-navy);
    padding: 15px 48px 15px 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
}
/* Subtle gold line at the very bottom edge */
.lh-foot::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--lh-navy) 0%, var(--lh-gold) 30%,
        var(--lh-gold-light) 50%,
        var(--lh-gold) 70%, var(--lh-navy) 100%
    );
}
.lh-foot-co      { font-size: 12px; font-weight: 700; color: #e2e8f0; }
.lh-foot-contact { font-size: 11px; color: rgba(255,255,255,.38); margin-top: 2px; }
.lh-foot-tagline {
    font-size: 11px;
    color: var(--lh-gold);
    font-style: italic;
    text-align: center;
    flex: 1;
    padding: 0 16px;
    opacity: .85;
}
.lh-foot-thanks {
    font-size: 12px;
    color: var(--lh-gold-light);
    font-weight: 600;
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   PRINT — identical to screen view
   ═══════════════════════════════════════════════════════════════ */
@media print {
    @page { size: A4; margin: 0.4cm 0.3cm; }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body { background: #fff !important; }
    .lh-toolbar { display: none !important; }
    .lh-wrap { margin: 0; padding: 0; max-width: 100%; }
    .lh-doc { box-shadow: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .lh-head {
        flex-wrap: wrap;
        padding: 20px 20px 20px 28px;
        gap: 14px;
    }
    .lh-dt { text-align: left; width: 100%; padding-left: 0; }
    .lh-head-divider,
    .lh-head-gold-panel { display: none; }

    .lh-parties { grid-template-columns: 1fr; }
    .lh-party.lh-pto {
        border-left: none;
        border-top: 1px solid var(--lh-border);
        padding-left: 44px;
    }

    .lh-meta { flex-wrap: wrap; }
    .lh-mc { flex-basis: 50%; border-bottom: 1px solid rgba(255,255,255,.07); }

    .lh-bottom { grid-template-columns: 1fr; }
    .lh-validity { border-top: 1px solid var(--lh-border); }

    .lh-table-wrap,
    .lh-totals-wrap,
    .lh-notes,
    .lh-sig,
    .lh-foot { padding-left: 20px; padding-right: 20px; }
    .lh-party { padding-left: 20px; }
    .lh-party.lh-pto { padding-left: 20px; }
}
