/* ---------------------------------------------------------------------------
 * PAYMENTS RECEIVED - the panel below a single invoice.
 * Scoped under .ivp so it cannot reach the rest of the bill page, which is
 * styled by the app theme.
 * ------------------------------------------------------------------------- */

.ivp {
    --ivp-surface:   #ffffff;
    --ivp-surface-2: #e9edef;
    --ivp-line:      #d5dce0;
    --ivp-hairline:  #e7ecee;
    --ivp-text:      #121a20;
    --ivp-text-2:    #5c6b78;
    --ivp-text-3:    #8697a3;
    --ivp-brass:     #9a6a1f;
    --ivp-paid:      #2563eb;
    --ivp-owing:     #a3261a;
    --ivp-settled:   #17604a;

    --ivp-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

    background: var(--ivp-surface);
    border: 1px solid var(--ivp-line);
    border-radius: 3px;
    margin-top: 22px;
}

.theme-dark .ivp,
html.dark .ivp,
.dark-theme .ivp {
    --ivp-surface: #151d23; --ivp-surface-2: #1c262d;
    --ivp-line: #2a353d; --ivp-hairline: #202b32;
    --ivp-text: #e7edf1; --ivp-text-2: #93a3af; --ivp-text-3: #6d7f8c;
    --ivp-brass: #cf9f4f;
    --ivp-paid: #3b82f6;
    --ivp-owing: #f08a7c;
    --ivp-settled: #52c49b;
}

.ivp-head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--ivp-line);
}
.ivp-title { font-size: 17px; font-weight: 620; margin: 0; color: var(--ivp-text); }
.ivp-sub { font-size: 14px; color: var(--ivp-text-2); }

.ivp-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.ivp-btn {
    font-size: 14.5px; font-weight: 550; padding: 7px 13px; border-radius: 3px; cursor: pointer;
    border: 1px solid var(--ivp-line); background: var(--ivp-surface); color: var(--ivp-text);
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.ivp-btn:hover { background: var(--ivp-surface-2); border-color: var(--ivp-text-3); color: var(--ivp-text); text-decoration: none; }
.ivp-btn-primary { background: var(--ivp-brass); border-color: var(--ivp-brass); color: #fff; }
.ivp-btn-primary:hover { background: var(--ivp-brass); border-color: var(--ivp-brass); color: #fff; filter: brightness(1.07); }

.ivp-scroll { overflow-x: auto; }
table.ivp-table { width: 100%; border-collapse: collapse; min-width: 760px; margin: 0; }
table.ivp-table thead th {
    text-align: left; font-size: 13px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ivp-text-3); padding: 9px 14px; background: var(--ivp-surface-2);
    border-bottom: 1px solid var(--ivp-line); white-space: nowrap;
}
table.ivp-table th.num, table.ivp-table td.num { text-align: right; }
table.ivp-table tbody td {
    padding: 11px 14px; border-bottom: 1px solid var(--ivp-hairline); border-top: 0;
    vertical-align: middle; color: var(--ivp-text); font-size: 15px;
}
table.ivp-table tbody tr:last-child td { border-bottom: 0; }
table.ivp-table tbody tr:hover { background: var(--ivp-surface-2); }

.ivp-date, .ivp-mono { font-family: var(--ivp-mono); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ivp-muted { color: var(--ivp-text-3); }
.ivp-amt { font-family: var(--ivp-mono); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ivp-owing { color: var(--ivp-owing); }
.ivp-settled { color: var(--ivp-settled); }

table.ivp-table tfoot td {
    padding: 10px 14px; background: var(--ivp-surface-2); border-top: 1px solid var(--ivp-line);
    border-bottom: 0; color: var(--ivp-text);
}
table.ivp-table tfoot tr + tr td { border-top: 0; padding-top: 0; }
.ivp-lbl {
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ivp-text-3); font-weight: 650; text-align: right;
}

.ivp-manage { width: 1%; white-space: nowrap; text-align: right; }
.ivp-icon {
    background: transparent; border: 1px solid var(--ivp-line); border-radius: 3px;
    width: 30px; height: 30px; cursor: pointer; color: var(--ivp-text-2);
    display: inline-flex; align-items: center; justify-content: center; margin-left: 4px;
}
.ivp-icon:hover { background: var(--ivp-surface-2); color: var(--ivp-text); }
.ivp-icon-danger:hover { color: var(--ivp-owing); border-color: var(--ivp-owing); }

.ivp-foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--ivp-hairline); }
.ivp-track { flex: 1; height: 6px; background: var(--ivp-surface-2); border-radius: 4px; overflow: hidden; }
.ivp-fill { height: 100%; background: var(--ivp-paid); border-radius: 4px; }
.ivp-pct { font-family: var(--ivp-mono); font-size: 13.5px; color: var(--ivp-text-3); white-space: nowrap; }

.ivp-empty { padding: 30px 18px; text-align: center; color: var(--ivp-text-3); font-size: 15px; }

/* the panel is screen furniture - printing the invoice should not include it */
@media print { .ivp { display: none; } }