/* ==========================================================================
   HX Console — Phase 8 design layer
   Loaded after hx-phase7.css.

   The dashboard's "what is owed" panel. Two columns of figures where the
   right-hand one is deliberately as prominent as the left: the all-time
   outstanding is usually the number that needs acting on, and making it
   secondary would defeat the point of showing it.
   ========================================================================== */

.due-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.due-position {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-align: right;
}
.due-position .money {
    font-size: var(--t-xl);
    font-weight: 700;
    line-height: 1.15;
}

/* A figures panel, not a data grid: no zebra, no hover. Borrowing the full
   table treatment would make seven figures look like a report. */
.due-table tbody tr,
.due-table tbody tr:nth-child(even),
.due-table tbody tr:hover { background: transparent; }

.due-table thead th {
    background: transparent;
    border-bottom: 1px solid var(--line);
    padding-top: 0;
}
.due-table tbody td {
    padding: 11px 16px 11px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.due-table tbody td.num { white-space: nowrap; }
.due-table tbody tr:last-child td { border-bottom: 0; }
.due-table tbody td .money { font-size: var(--t-num); }

.due-note { margin-top: 2px; line-height: 1.4; }
.due-table td.num .due-note { text-align: right; }

@media (max-width: 860px) {
    .due-position { align-items: flex-start; text-align: left; }
    .due-table td.num .due-note { text-align: left; }
    /* Stacked, the row label already carries the figure's name, so the
       period and all-time labels are what tell them apart. */
    .due-table.stack-mobile tbody td { padding: 7px 0; }
}