/* ============================================================
   FORMS — Shared styles for data-entry forms
   (JournalEntryForm, CashEntry, and similar transaction forms)
   ============================================================ */

/* ── Summary strip (Dispose asset form) ────────────── */
.ce-summary-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

/* ── Summary items (shared between panels and forms) ── */
.ce-summary-item,
.ad-summary-pill {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ad-summary-pill {
    padding: 8px 14px;
    background: var(--surface-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.ad-summary-label {
    font-size: 11px;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.ad-summary-value {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
}

/* ── Entry table rows (shared) ─────────────────────── */
.ce-table {
    /* compact table for entry forms */
}

.ce-row td {
    padding: 4px 8px;
    vertical-align: middle;
}

    .ce-row td:first-child {
        padding-left: 16px;
    }

.ce-row .form-input {
/*    height: 32px;*/
    font-size: 12px;
}

.ce-table .je-amount-col {
    width: 160px;
    min-width: 160px;
}

.ce-row .vx-dropdown-display {
    height: 32px;
}

/* A row Post refused: incomplete, negative, or not allowed in this book. */
.ce-row.ce-row-invalid td {
    background: color-mix(in srgb, var(--status-danger) 8%, transparent);
}

    .ce-row.ce-row-invalid td:first-child {
        box-shadow: inset 3px 0 0 var(--status-danger);
    }

/* ── Section labels (JE form DR/CR headers) ────────── */
.je-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 6px;
}

.je-dr-label { color: var(--status-danger); }
.je-cr-label { color: var(--status-success); }

.je-section-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.je-section-dot.dr { background: var(--status-danger); }
.je-section-dot.cr { background: var(--status-success); }

/* ── Entry pages (journals, cash and bank entries) ── */
/* A form, not a report: past 1280px it stops growing and centres, so a row's account, chips and
   amount stay together instead of spreading across a wide screen. */
.entry-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 1280px;
    min-width: 0;
    margin-inline: auto;
}

.entry-back-link {
    align-self: flex-start;
}

/* Once the capped form floats in a wide content area it becomes a sheet: the app's card surface
   around the fields, lines and totals, with the totals bar along its bottom edge. The tables keep
   the page tone inside it, so they look as they do on the bare page. Narrower screens keep the
   bare form, where the sheet's padding would push the cash table past the page. */
@media (min-width: 1600px) {
    .entry-page > :is(.je-form, .ce-form) {
        padding: 20px 24px 0;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--card-shadow);
    }

    .entry-page .entry-table-scroll {
        background: var(--content-bg);
    }

    .entry-page .entry-actions {
        margin-inline: -24px;
        padding: 12px 24px 14px;
        background: var(--card-bg);
        border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
    }
}

.je-form {
    min-width: 0;
}

/* ── Cash and bank entry form ──────────────────────── */
.ce-form {
    min-width: 0;
}

.ce-form-header {
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.ce-book-account {
    width: min(100%, 320px);
}

/* Each row carries its own date, reference and narration; a narrower narration minimum lets a
   row fit a 1280px screen beside the sidebar, and the column still takes any spare width. */
.ce-form .ce-table .col-narr {
    min-width: 176px;
}

/* The account column holds the account and its chips, so it takes a fixed share of the table
   rather than what the inputs' default widths leave it. Beside the sidebar at 1280px the other
   columns leave it about 310px, so a chip stops at 150px and shortens a long name, and the
   account beside it stays readable. */
.ce-form .ce-table .ce-account-col {
    width: 32%;
}

.ce-form .entry-chip-wrap {
    max-width: 150px;
}

/* Date, reference, rate and amount keep their natural width, so spare width on a wide screen
   goes to the narration. */
.ce-form .ce-table .ce-fit-col {
    width: 1%;
}

/* ── Journal form header ───────────────────────────── */
.je-form-header {
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

/* ── DR/CR layout ──────────────────────────────────── */
/* Side by side when each table gets 580px, room for an account and its chip; stacked when the
   content area is narrower (the sidebar's width counts). */
.je-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 580px), 1fr));
    gap: 16px;
    margin-bottom: 4px;
}

    .je-columns > div {
        min-width: 0;
    }

/* An entry page's tables grow with their rows and scroll sideways inside their own frame on a
   narrow screen. Keep this a scroll container: with overflow visible a grid cannot shrink, the
   page gets clipped, and the shared sticky table headers pin to the page instead of the table. */
.entry-table-scroll {
    max-height: none;
}

/* Pickers in entry rows size to their cell rather than to the text box's default width, so the
   cells share the table's width instead of pushing it past the page. */
.ce-table .vx-dropdown-input {
    width: 0;
}

/* ── Row context chips ─────────────────────────────── */
/* What a row carries beyond its account (a client or supplier, or what posting does with a
   fixed-asset amount) is a chip beside the account picker (ContactChip, AssetChip), so every row
   keeps one line and the tables need no column most rows leave empty. The account picker keeps
   a readable minimum; on a narrow screen the table scrolls sideways instead of wrapping a chip. */
.entry-account {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    /* The account fills what its chips leave, so a row has no gap before its amount; a chip
       keeps its own width up to its cap. */
    .entry-account > .vx-dropdown {
        flex: 1 1 0;
        min-width: 112px;
    }

.entry-chip-wrap {
    flex: 0 0 auto;
    max-width: 200px;
}

/* The shape of .vx-chip, sized to sit inside a 32px row. */
.entry-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: 26px;
    padding: 0 9px 0 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .entry-chip:hover {
        background: var(--surface-bg);
        color: var(--text-primary);
    }

    .entry-chip:focus-visible,
    .entry-chip.show {
        outline: none;
        border-color: var(--input-focus-border);
        box-shadow: var(--input-focus-shadow);
    }

    /* Optional and not chosen yet. */
    .entry-chip.is-empty {
        border-style: dashed;
        color: var(--text-muted);
    }

    .entry-chip.is-set {
        color: var(--text-primary);
    }

    /* The amount goes to an existing asset, so the row reads differently from a purchase. */
    .entry-chip.is-linked {
        background: var(--accent-glow);
        border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
        color: var(--accent-primary);
    }

    .entry-chip.is-invalid {
        background: color-mix(in srgb, var(--status-danger) 10%, transparent);
        border-color: color-mix(in srgb, var(--status-danger) 55%, transparent);
        color: var(--status-danger-text);
    }

    /* Says what posting does but offers no choice (a transfer journal). */
    .entry-chip.is-static,
    .entry-chip.is-static:hover {
        border-color: var(--border);
        background: transparent;
        color: var(--text-muted);
        cursor: default;
    }

.entry-chip-icon,
.entry-chip-caret,
.entry-chip-option-icon,
.entry-chip-option-check {
    display: flex;
    flex-shrink: 0;
}

.entry-chip-caret {
    opacity: 0.65;
}

.entry-chip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entry-chip.is-linked .entry-chip-text,
.entry-chip.is-invalid .entry-chip-text {
    font-weight: 600;
}

.entry-chip-key {
    font-weight: 500;
    opacity: 0.8;
}

/* ── Chip menus ───────────────────────────────────── */
/* A Bootstrap dropdown themed like DropDownBox's list and sized to its options. It is fixed so
   scrolling tables do not clip it, and Popper places it under its chip. */
.entry-chip-menu.dropdown-menu {
    --bs-dropdown-zindex: 1055;
    --bs-dropdown-min-width: 260px;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 6px;
    --bs-dropdown-font-size: 12px;
    --bs-dropdown-color: var(--text-primary);
    --bs-dropdown-bg: var(--surface-elevated);
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-border-radius: var(--radius-md);
    --bs-dropdown-link-color: var(--text-primary);
    --bs-dropdown-link-hover-color: var(--text-primary);
    --bs-dropdown-link-hover-bg: var(--surface-bg);
    --bs-dropdown-link-active-color: var(--accent-primary);
    --bs-dropdown-link-active-bg: var(--accent-glow);
    --bs-dropdown-item-padding-x: 12px;
    --bs-dropdown-item-padding-y: 7px;
    position: fixed !important;
    max-width: 340px;
    box-shadow: var(--card-shadow-hover);
    font-family: var(--font-body);
}

.entry-chip-menu-heading {
    padding: 8px 12px 4px;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.entry-chip-menu-note {
    margin: 2px 8px 6px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--status-danger) 10%, transparent);
    color: var(--status-danger-text);
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
}

.entry-chip-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 8px 4px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}

    .entry-chip-search input {
        flex: 1;
        min-width: 0;
        border: none;
        background: transparent;
        color: var(--text-primary);
        font-family: var(--font-body);
        font-size: 12px;
        outline: none;
    }

.entry-chip-options {
    max-height: 240px;
    overflow-y: auto;
    padding: 0 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.entry-chip-menu .entry-chip-option {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: var(--radius-sm);
    white-space: normal;
}

    .entry-chip-menu .entry-chip-option.is-selected {
        background: var(--accent-glow);
        color: var(--accent-primary);
    }

    .entry-chip-menu .entry-chip-option.is-quiet .entry-chip-option-title {
        color: var(--text-muted);
        font-style: italic;
        font-weight: 400;
    }

.entry-chip-option-icon {
    color: var(--text-muted);
}

.entry-chip-option.is-selected .entry-chip-option-icon {
    color: inherit;
}

.entry-chip-option-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.entry-chip-option-title {
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-chip-option-meta {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-chip-empty {
    padding: 10px 12px;
    color: var(--text-muted);
    font-size: 12px;
    white-space: normal;
}

/* ── Totals and posting ────────────────────────────── */
/* Stays on the bottom edge while long entries scroll; the negative offset is .app-content's
   padding. Messages sit inside it so a refusal is never hidden under the bar. */
.entry-actions {
    position: sticky;
    bottom: calc(-1 * var(--space-page));
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 0;
    /* Solid, so lines scrolling underneath never show through a message. */
    background: var(--content-bg);
    border-top: 1px solid var(--border);
}

.entry-actions-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.entry-totals {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-right: 8px;
}

.ad-summary-value.entry-total-empty {
    color: var(--text-muted);
}

.entry-posted-note {
    margin: 0;
    color: var(--status-success-text);
    font-size: 13px;
}

@media (max-width: 600px) {
    .entry-actions {
        bottom: -16px;
    }

    /* Totals take their own line above the buttons. */
    .entry-totals {
        order: -1;
        width: 100%;
        justify-content: space-between;
        margin-right: 0;
    }
}

/* ── Input validation ──────────────────────────────── */
.ae-input-error {
    border-color: var(--status-danger) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger) 12%, transparent) !important;
}

.ae-error-text {
    font-size: 12px;
    color: var(--status-danger);
    margin-top: 3px;
    display: block;
}