/* ============================================================================
 * entry-form.css - Shared multi-line entry visual primitives
 * Used by: journal entry, expense entry, future POS
 *
 * IMPORTANT: this stylesheet uses ONLY framework theme tokens defined in each
 * site's universal.css (--info, --info-bg, --info-text, --info-dark,
 * --warning, --warning-bg, --warning-text, --warning-dark, --success,
 * --success-bg, --error, --error-bg, --error-text, --border, --border-light,
 * --bg-layer-darken, --bg-layer-lighten, --text-on-light, --text-on-light-secondary,
 * --radius-sm, --radius-md, --text-on-dark). No invented var(--color-*) names.
 * No hardcoded literal colors. The site's theme paints these components.
 *
 * Class taxonomy mirrors the JS API in entry-form.js:
 *   .entry-line-row              - one repeating row in a multi-line form
 *   .entry-expected-side         - input column matching account's normal balance
 *   .entry-other-side            - the opposite column (still usable, just dimmer)
 *   .entry-account-badge         - small "Asset · Dr normal" label under account picker
 *   .entry-balanced              - difference display when Dr = Cr
 *   .entry-imbalanced            - difference display when Dr != Cr
 *   .entry-error                 - row currently has a validation error
 *   .entry-line-error            - the error message element appended to a row
 *   .entry-disabled              - disabled state styling for save buttons
 *   .entry-edit-info             - info banner (no changes / editable-only changes)
 *   .entry-edit-warning          - warning banner (monetary changes will void+redo)
 *   .entry-warning-action        - save button styled as destructive-caution
 * ============================================================================ */

/* ── Direction-aware column highlighting ──────────────────────────────────── */

.entry-expected-side {
    /* Soft theme-aware tint of the canonical success token — NEVER the solid
       --success-bg alias (it maps to the full-strength primary, which painted
       the input unreadable; owner-rejected on FG 2026-07-23). The plain
       var() line is the fallback for browsers without color-mix. */
    background-color: var(--success-bg);
    background-color: color-mix(in srgb, var(--success) 16%, transparent);
    border-color:     var(--success);
    box-shadow:       inset 0 0 0 1px var(--success);
}

.entry-other-side {
    background-color: transparent;
    opacity: 0.55;
}

.entry-other-side:focus,
.entry-other-side:hover {
    opacity: 1;
}

/* ── Account-type badge ───────────────────────────────────────────────────── */

.entry-account-badge {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: var(--font-size-xs);
    line-height: 1.2;
    color: var(--text-on-light-secondary);
    background: var(--bg-layer-darken);
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
}

.entry-account-badge[data-normal-balance="Dr"] {
    color: var(--info);
}

.entry-account-badge[data-normal-balance="Cr"] {
    color: var(--warning-dark);
}

.entry-account-badge:empty {
    display: none;
}

/* ── Live total displays ──────────────────────────────────────────────────── */

.entry-balanced {
    color: var(--success);
    font-weight: 600;
}

.entry-balanced::after {
    content: ' \2713'; /* checkmark */
    margin-left: 0.25rem;
}

.entry-imbalanced {
    color: var(--warning);
    font-weight: 600;
}

/* ── Save button toggling ─────────────────────────────────────────────────── */

button.entry-disabled,
button.entry-disabled:hover {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

/* ── Row-level errors ─────────────────────────────────────────────────────── */

.entry-error {
    background-color: var(--error-bg);
    border-left: 3px solid var(--error);
    padding-left: 0.5rem;
}

.entry-line-error {
    flex: 0 0 100%;
    margin-top: 0.5rem;
    padding: 0.375rem 0.625rem;
    font-size: var(--font-size-sm);
    color: var(--error-text);
    background: var(--error-bg);
    border-radius: var(--radius-sm);
}

/* ── Two-column Dr/Cr layout helpers ──────────────────────────────────────── */

.entry-dr-cr-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    border-bottom: 1px dashed var(--border-light);
    padding-bottom: 0.5rem;
}

.entry-dr-cr-row .entry-account-cell { flex: 3; min-width: 200px; }
.entry-dr-cr-row .entry-amount-cell  { flex: 1; min-width: 100px; }
.entry-dr-cr-row .entry-memo-cell    { flex: 2; min-width: 140px; }
.entry-dr-cr-row .entry-action-cell  { flex: 0 0 auto; padding-top: 1.5rem; }

/* ── Expense entry line layout (Books → Enter Expense) ────────────────────── */
/* De-inlined from renderExpenseLines.php. Same wrap-flex shape as the Dr/Cr
   row above; the inventory-receipt fields drop onto their own full-width line. */

.expense-line-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    border-bottom: 1px dashed var(--border-light);
    padding-bottom: 0.5rem;
}

.expense-line-row .exp-cell-account { flex: 2; min-width: 180px; }
.expense-line-row .exp-cell-amount  { flex: 1; min-width: 100px; }
.expense-line-row .exp-cell-hst     { flex: 1; min-width: 80px; }
.expense-line-row .exp-cell-itc     { flex: 0 0 auto; padding-top: 1.5rem; }
.expense-line-row .exp-cell-project { flex: 1; min-width: 140px; }
.expense-line-row .exp-cell-memo    { flex: 2; min-width: 140px; }
.expense-line-row .exp-cell-action  { flex: 0 0 auto; padding-top: 1.5rem; }

/* ── Desktop priority grid (owner standard 2026-08-05) ────────────────────
   Two priority rows: the working cells (Account | Amount | HST | ITC | ✕)
   own the FIRST line at full width — numbers get room for large amounts —
   and the rarely-used Project/Memo drop to a second line. The grid replaces
   flex wrapping above 640px; below 640px the mobile stack (bottom of file)
   takes over. Errors and the inventory sub-block span all columns. */
@media (min-width: 641px) {
    .expense-line-row {
        display: grid;
        grid-template-columns: minmax(180px, 2fr) minmax(110px, 1fr) minmax(90px, 1fr) auto auto;
        grid-template-areas:
            "account amount hst itc action"
            "project project memo memo memo";
        align-items: end;
    }

    .expense-line-row .exp-cell-account { grid-area: account; }
    .expense-line-row .exp-cell-amount  { grid-area: amount;  }
    .expense-line-row .exp-cell-hst     { grid-area: hst;     }
    .expense-line-row .exp-cell-itc     { grid-area: itc;     }
    .expense-line-row .exp-cell-action  { grid-area: action;  }
    .expense-line-row .exp-cell-project { grid-area: project; }
    .expense-line-row .exp-cell-memo    { grid-area: memo;    }
    .expense-line-row .exp-inv-block    { grid-column: 1 / -1; }
    .expense-line-row .entry-line-error { grid-column: 1 / -1; }
}

/* ── Payment line layout (Paid From / Amount / Memo / ✕) ──────────────────
   Markup in renderPaymentLines.php (shared by books transactions + member
   my-expenses). Same wrap-flex shape as the rows above; de-inlined
   2026-08-05 — the old inline styles bypassed the mobile stack and left
   the Amount display truncated under the calculator icon on phones. */

.payment-line-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.payment-line-row .pay-cell-account { flex: 2; min-width: 160px; }
.payment-line-row .pay-cell-amount  { flex: 1; min-width: 110px; }
.payment-line-row .pay-cell-memo    { flex: 2; min-width: 100px; }
.payment-line-row .pay-cell-action  { flex: 0 0 auto; padding-top: 1.5rem; }

/* Inventory-receipt sub-block: its own full-width line under the main cells. */
.expense-line-row .exp-inv-block {
    flex: 0 0 100%;
    margin-top: 0.25rem;
    padding: 0.5rem;
    background: var(--bg-layer-darken);
    border-radius: var(--radius-sm);
}
.expense-line-row .exp-inv-block.is-hidden { display: none; }

.exp-inv-block__title { font-size: var(--font-size-sm); }

.exp-inv-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.exp-inv-grid .exp-cell-item    { flex: 2; min-width: 180px; }
.exp-inv-grid .exp-cell-variant { flex: 2; min-width: 160px; }
.exp-inv-grid .exp-cell-qty     { flex: 1; min-width: 100px; }

/* ── Mobile stack (framework 640px standard) ──────────────────────────────
   On phones the min-width wrapping above degenerates into ragged part-rows;
   below 640px every entry-line cell takes its own full-width line instead.
   The action/ITC cells lose their desktop label-alignment padding since
   there is no adjacent label to align with when stacked. */
@media (max-width: 640px) {
    .entry-dr-cr-row,
    .expense-line-row,
    .payment-line-row,
    .exp-inv-grid {
        flex-direction: column;
        align-items: stretch;
    }

    .entry-dr-cr-row > div,
    .expense-line-row > div,
    .payment-line-row > div,
    .exp-inv-grid > div {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .entry-dr-cr-row .entry-action-cell,
    .expense-line-row .exp-cell-action,
    .expense-line-row .exp-cell-itc,
    .payment-line-row .pay-cell-action {
        padding-top: 0;
    }
}

/* When the + New Item inline-create form opens inside the item cell, let that
   cell span the full inventory grid so the form renders full width instead of
   being squeezed into one column. Clean cascade (base flex is in this sheet,
   not inline) — no !important needed. */
.exp-inv-grid .exp-cell-item:has(> .inline-create-target:not(:empty)) {
    flex: 1 1 100%;
}

/* ── Edit-mode banners + warning save button ──────────────────────────────── */

/* Info banner: shown when in edit mode with no changes yet OR with only editable changes. */
.entry-edit-info {
    display: block;
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--info-bg);
    border-left: 4px solid var(--info);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--info-text);
}

/* Warning banner: shown when monetary changes detected — save will void+redo */
.entry-edit-warning {
    display: block;
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--warning-bg);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--warning-text);
}

/* Both banners: strong = block-level title line. small = block-level footnote. */
.entry-edit-info strong,
.entry-edit-warning strong {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: var(--font-size-md);
}

.entry-edit-warning strong {
    color: var(--warning-dark);
}

.entry-edit-info strong {
    color: var(--info-dark);
}

.entry-edit-info small,
.entry-edit-warning small {
    display: block;
    margin-top: 0.5rem;
    opacity: 0.75;
    font-size: var(--font-size-sm);
}

/* Save button styled as a destructive-caution when about to void+redo. */
button.entry-warning-action,
button.entry-warning-action:hover {
    background: var(--warning);
    border-color: var(--warning-dark);
    color: var(--text-on-dark);
}

button.entry-warning-action:hover {
    background: var(--warning-dark);
}

/* ── Totals strip ─────────────────────────────────────────────────────────── */

.entry-totals-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: baseline;
    padding: 0.75rem 1rem;
    background: var(--bg-layer-darken);
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
}

.entry-totals-strip > div { font-size: var(--font-size-md); }
.entry-totals-strip strong { font-variant-numeric: tabular-nums; }