/* Journal Entry.
 *
 * The page borrows the invoice entry layout wholesale — .invoice-container, the cards, the floating
 * label fields, .modern-table — so this file only carries what a journal genuinely needs to differ
 * on. Everything here was settled against the design sample; the comments say why, because most of
 * these rules exist to undo something .modern-table does for the invoice grid specifically.
 */

/* --- The entry grid ------------------------------------------------------------------------
 *
 * .modern-table is built for the invoice product grid: min-width 1500px, and four FROZEN columns
 * (1st, 2nd, 2nd-last, last) that are position: sticky with hard widths of 60 / 300 / 100 / 90px
 * plus an edge shadow. On a seven-column journal line that froze Cr/Db at 300px and pushed the row
 * far past the card. A journal line is short enough to read whole, so the freezing is undone and
 * the columns size to their content.
 *
 * A min-width beats a width, so clearing min-width is what actually stops the horizontal scroll —
 * setting width alone does nothing.
 */
.journal-table-container .modern-table {
    min-width: 0;
    width: 100%;
}

.journal-table-container .modern-table th,
.journal-table-container .modern-table td {
    position: static;
    left: auto;
    right: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    box-shadow: none;
    white-space: normal;
}

/* --- The container must not clip -----------------------------------------------------------
 *
 * .table-container is max-height: 260px with overflow auto on both axes, which is right for the
 * invoice product grid. Here it cut the account dropdown off: VirtualDropdown's panel is
 * position: absolute and roughly 274px tall, so opening one in a 126px-tall scrollport hid all but
 * the first line or two of the list.
 *
 * The fix is to stop clipping rather than to reposition the panel — VirtualDropdown is shared with
 * every other page and must not be reworked for this one. A journal runs to a handful of lines, and
 * .invoice-container already scrolls the page, so nothing is lost by letting the table run its full
 * height.
 */
.journal-table-container {
    overflow: visible;
    max-height: none;
}

/* Sticky headers need a scrollport to stick inside. With the container no longer scrolling, the
   nearest one is .invoice-container, so a sticky header here would float over the Voucher card
   instead of over its own rows. The table is short; the header stays put on its own. */
.journal-table-container .modern-table thead th {
    position: static;
}

/* --- Fields inside a cell ------------------------------------------------------------------
 *
 * The invoice grid is read-only per row — it edits through a popup — so .modern-table has no
 * styling for controls sitting in a cell.
 *
 * Deliberately not width: 100%. With the columns auto-sizing, a percentage width gives the browser
 * no intrinsic width to measure and it hands the space out arbitrarily, which ballooned Cr/Db and
 * collapsed Credit. Sized to content instead, so each column ends up as wide as what it holds.
 */
.journal-table-container td input,
.journal-table-container td select {
    width: auto;
    max-width: 100%;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid #c8c6c4;
    border-radius: 4px;
    background: #fff;
    font-weight: bold;
    color: #323130;
}

.journal-table-container td {
    vertical-align: middle;
}

/* The group and account cells hold a VirtualDropdown, which is width: 100% of whatever contains
   it. In an auto-sized table that gives the browser no intrinsic width to measure and it hands the
   space out arbitrarily — the same thing that ballooned Cr/Db before the frozen columns were
   cleared. A floor gives it something real to size from; the columns still grow past it. */
.journal-table-container th.col-picker,
.journal-table-container td.col-picker {
    min-width: 170px;
}

/* Amounts read as a column of figures, so they stay right-aligned. */
.journal-table-container th.col-amount,
.journal-table-container td.col-amount {
    text-align: right;
}

.journal-table-container td.col-amount input {
    text-align: right;
    /* A number input with no width takes the browser default of about twenty characters — wider
       than either name column. An amount never needs that. */
    width: 9ch;
}

/* A number input reserves room for its spinner arrows, which eats the last digits of the figure.
   Nothing here is stepped, so they earn no space. */
.journal-table-container td input[type=number]::-webkit-outer-spin-button,
.journal-table-container td input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.journal-table-container td input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* The side the line is NOT on is dead: zero, and not editable. Greyed rather than hidden so the
   two amount columns stay aligned down the page. */
.journal-table-container td.col-amount input:disabled {
    background: #f3f4f6;
    color: #9ca3af;
}

/* --- Narration and Balance -----------------------------------------------------------------
 *
 * Side by side, Narration the wider. The invoice card is a three-column grid that collapses on
 * narrow screens, which stacked them; this pins it to two.
 */
.journal-amount-detail-header {
    grid-template-columns: 2fr 1fr;
}

/* Debit must equal Credit before the voucher can be saved, so the difference is the one figure
   worth colouring. */
.journal-balanced {
    color: #0f7b3f;
    font-weight: bold;
}

.journal-unbalanced {
    color: #c1121f;
    font-weight: bold;
}