/* Billing pages (contracts + invoices). Complements dotleads.css with the dl-bl- prefix
   so nothing here can collide with the shared design system. */

/* ---------- filter bar ---------- */

.dl-bl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.dl-bl-filters .dl-select,
.dl-bl-filters .dl-input { width: auto; min-width: 150px; flex: 0 1 auto; }

.dl-bl-search {
    position: relative;
    flex: 1 1 220px;
    min-width: 190px;
}

.dl-bl-search > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    pointer-events: none;
    /* Above the positioned .dl-cbx wrap the company combobox adds, below its panel (1200). */
    z-index: 1;
}

.dl-bl-search .dl-input { width: 100%; padding-left: 34px; }

.dl-bl-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
}

/* ---------- table ---------- */

.dl-bl-tablehead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.dl-bl-tablewrap { overflow-x: auto; }

.dl-bl-actions-col { width: 1%; white-space: nowrap; }

.dl-bl-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 34px 12px;
    color: var(--text-muted);
    font-size: .88rem;
}

.dl-bl-number {
    font-weight: 600;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.dl-bl-sub {
    font-size: .74rem;
    color: var(--text-faint);
    margin-top: 2px;
}

.dl-bl-none { color: var(--text-faint); }

.dl-bl-money { font-variant-numeric: tabular-nums; white-space: nowrap; }

.dl-bl-rowacts { display: inline-flex; gap: 4px; }

/* ---------- pager ---------- */

.dl-bl-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.dl-bl-pageinfo { font-size: .8rem; color: var(--text-muted); }

.dl-bl-pagebtns { display: flex; gap: 8px; }

/* ---------- invoice line editor ---------- */

.dl-bl-lines {
    width: 100%;
    border-collapse: collapse;
}

.dl-bl-lines th {
    text-align: left;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 0 6px 6px;
    font-weight: 600;
}

.dl-bl-lines th.num, .dl-bl-lines td.num { text-align: right; }

.dl-bl-lines td {
    padding: 4px 6px;
    vertical-align: middle;
}

.dl-bl-lines .dl-input { width: 100%; }

.dl-bl-linetotal {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-strong);
    font-weight: 600;
}

.dl-bl-totals {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--hairline);
    align-items: flex-end;
}

.dl-bl-total-row {
    display: flex;
    gap: 18px;
    align-items: baseline;
    font-size: .85rem;
    color: var(--text-muted);
}

.dl-bl-total-row .val {
    min-width: 130px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
    font-weight: 600;
}

.dl-bl-total-row.grand { font-size: 1rem; }

.dl-bl-total-row.grand .val { color: var(--emerald); font-weight: 700; }

/* ---------- record payment ---------- */

.dl-bl-balance {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--hover-bg);
    border: 1px solid var(--hairline);
    margin-bottom: 14px;
}

.dl-bl-balance .lbl { font-size: .76rem; color: var(--text-muted); }

.dl-bl-balance .amt {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}