/* =========================================================
   Payment Voucher Maker — tool-specific styles
   Layered on top of assets/common/common.css (.ps-fin-tool)
   Namespace: ps-pv-*
   ========================================================= */

/* ---------------- Form: currency row + line items ---------------- */

.ps-pv-currency-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ps-pv-line-items-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.ps-pv-line-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ps-pv-line-row .ps-pv-line-desc {
    flex: 1 1 auto;
    min-width: 0;
}

.ps-pv-line-row .ps-pv-line-amount {
    flex: 0 0 110px;
    text-align: right;
}

.ps-pv-line-remove {
    flex: 0 0 auto;
    width: 28px;
    height: 38px;
    border: 1px solid var(--ps-fin-border);
    background: #fff;
    color: var(--ps-fin-muted);
    border-radius: var(--ps-fin-radius);
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
}

.ps-pv-line-remove:hover {
    border-color: #d64545;
    color: #d64545;
}

.ps-pv-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--ps-fin-border);
    font-weight: 700;
    font-size: 0.98em;
    color: var(--ps-fin-text);
}

/* ---------------- Voucher preview: shared structure ---------------- */

.ps-pv-voucher {
    background: var(--ps-fin-bg-paper);
    border-radius: var(--ps-fin-radius);
    overflow: hidden;
}

/* The panel-edge border is a screen-only editing aid, not part of the
   printed document — most of these vouchers get printed onto pre-printed
   letterhead, where a full box around the whole page looks wrong. Specific
   layouts (Formal Bordered, Boxed Ledger) opt back into a real border below,
   since it's a deliberate part of those designs. */
@media screen {
    .ps-pv-voucher {
        border: 1px solid var(--ps-fin-border);
    }
}

.ps-pv-letterhead-spacer {
    position: relative;
    border-bottom: 1px dashed var(--ps-fin-border);
}

.ps-pv-letterhead-spacer-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    color: var(--ps-fin-muted);
    font-style: italic;
}

.ps-pv-band {
    padding: 24px 30px 0;
}

.ps-pv-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.ps-pv-logo {
    max-height: 52px;
    max-width: 160px;
    object-fit: contain;
}

.ps-pv-headerinfo {
    min-width: 0;
}

.ps-pv-company {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--ps-fin-text);
}

.ps-pv-address,
.ps-pv-contact {
    font-size: 0.85em;
    color: var(--ps-fin-muted);
    line-height: 1.4;
}

.ps-pv-title-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 0;
    border-top: 2px solid var(--ps-fin-accent);
    margin-top: 6px;
}

.ps-pv-title-text {
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ps-fin-text);
}

.ps-pv-title-meta {
    display: flex;
    gap: 20px;
    font-size: 0.88em;
    color: var(--ps-fin-muted);
}

.ps-pv-title-meta strong {
    color: var(--ps-fin-text);
    margin-left: 4px;
}

.ps-pv-content {
    padding: 20px 30px 28px;
}

.ps-pv-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ps-fin-border);
}

@media (max-width: 560px) {
    .ps-pv-info-grid {
        grid-template-columns: 1fr;
    }
}

.ps-pv-info-label {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ps-fin-muted);
    display: block;
    margin-bottom: 3px;
}

.ps-pv-info-value {
    font-size: 1em;
    font-weight: 600;
    color: var(--ps-fin-text);
}

.ps-pv-info-sub {
    font-size: 0.85em;
    color: var(--ps-fin-muted);
    white-space: pre-line;
}

.ps-pv-info-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.92em;
    padding: 3px 0;
}

.ps-pv-info-row .ps-pv-info-label {
    margin-bottom: 0;
}

.ps-pv-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
    margin-bottom: 16px;
}

.ps-pv-items-table thead th {
    text-align: left;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ps-fin-muted);
    padding: 0 0 8px;
    border-bottom: 2px solid var(--ps-fin-border);
}

.ps-pv-items-table .ps-pv-col-amount {
    text-align: right;
    width: 130px;
}

.ps-pv-items-table tbody td {
    padding: 8px 0;
    border-bottom: 1px solid var(--ps-fin-border);
    color: var(--ps-fin-text);
    vertical-align: top;
}

.ps-pv-items-table tbody td:last-child {
    text-align: right;
    white-space: nowrap;
}

.ps-pv-total-tr td {
    padding-top: 10px;
    font-weight: 700;
    font-size: 1.02em;
    border-bottom: none;
    border-top: 2px solid var(--ps-fin-text);
}

.ps-pv-total-tr td:last-child {
    text-align: right;
}

.ps-pv-words-row,
.ps-pv-purpose-row {
    font-size: 0.9em;
    margin-bottom: 10px;
    padding-top: 6px;
}

.ps-pv-words-row span:last-child,
.ps-pv-purpose-row span:last-child {
    display: block;
    color: var(--ps-fin-text);
    font-style: italic;
    margin-top: 2px;
}

.ps-pv-signatures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

@media (max-width: 560px) {
    .ps-pv-signatures {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.ps-pv-sig-block {
    text-align: center;
}

.ps-pv-sig-line {
    border-top: 1px solid var(--ps-fin-text);
    margin-bottom: 6px;
}

.ps-pv-sig-name {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--ps-fin-text);
    min-height: 1.2em;
}

.ps-pv-sig-title {
    font-size: 0.75em;
    color: var(--ps-fin-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
}

.ps-pv-footer {
    padding: 12px 30px;
    background: var(--ps-fin-bg-panel);
    border-top: 1px solid var(--ps-fin-border);
    font-size: 0.78em;
    color: var(--ps-fin-muted);
    text-align: center;
}

/* ---------------- Layout variants ---------------- */

/* Classic Ledger (default): plain header, accent rule under header */
.ps-pv-layout-classic .ps-pv-title-badge {
    border-top-color: var(--ps-fin-accent);
}

/* Modern Bold: filled accent header band */
.ps-pv-layout-modern .ps-pv-band {
    background: var(--ps-fin-accent);
    padding-top: 24px;
    padding-bottom: 16px;
    margin-bottom: 0;
}

.ps-pv-layout-modern .ps-pv-company,
.ps-pv-layout-modern .ps-pv-title-text {
    color: #fff;
}

.ps-pv-layout-modern .ps-pv-address,
.ps-pv-layout-modern .ps-pv-contact,
.ps-pv-layout-modern .ps-pv-title-meta {
    color: rgba(255, 255, 255, 0.85);
}

.ps-pv-layout-modern .ps-pv-title-meta strong {
    color: #fff;
}

.ps-pv-layout-modern .ps-pv-title-badge {
    border-top-color: rgba(255, 255, 255, 0.4);
}

/* Formal Bordered: full outer border + centered serif-style title */
.ps-pv-layout-formal {
    border: 2px solid var(--ps-fin-text);
}

.ps-pv-layout-formal .ps-pv-title-badge {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    border-top: none;
    border-bottom: 1px solid var(--ps-fin-border);
    padding-bottom: 14px;
}

.ps-pv-layout-formal .ps-pv-title-text {
    font-size: 1.3em;
}

/* Minimal Compact: no table borders, tighter spacing */
.ps-pv-layout-minimal .ps-pv-band,
.ps-pv-layout-minimal .ps-pv-content {
    padding-left: 24px;
    padding-right: 24px;
}

.ps-pv-layout-minimal .ps-pv-title-badge {
    border-top: none;
    border-bottom: 1px solid var(--ps-fin-border);
}

.ps-pv-layout-minimal .ps-pv-items-table thead th {
    border-bottom-width: 1px;
}

.ps-pv-layout-minimal .ps-pv-total-tr td {
    border-top-width: 1px;
}

/* Stamped Official: left accent sidebar stripe */
.ps-pv-layout-stamped {
    position: relative;
    border-left: 8px solid var(--ps-fin-accent);
}

.ps-pv-layout-stamped .ps-pv-title-badge {
    border-top-color: var(--ps-fin-accent);
}

.ps-pv-layout-stamped .ps-pv-title-text::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--ps-fin-accent);
    vertical-align: middle;
}

/* Boxed Ledger: thin all-round border with a double-ruled title band.
   Unlike Formal Bordered (thicker frame, centered title), this keeps the
   classic left-aligned header but adds a deliberate ledger-book frame —
   this is the second (and only other) design that keeps a real border
   when printed; every other layout stays borderless for letterhead use. */
.ps-pv-layout-boxed {
    border: 1px solid var(--ps-fin-text);
}

.ps-pv-layout-boxed .ps-pv-title-badge {
    border-top: 1px solid var(--ps-fin-text);
    border-bottom: 1px solid var(--ps-fin-text);
    padding: 10px 0;
}

.ps-pv-layout-boxed .ps-pv-items-table thead th {
    border-bottom: 2px solid var(--ps-fin-text);
}