/* financials-fee-register.css — spreadsheet-style fee register */

.fin-reg-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.fin-reg-scroll {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-md);
}

.fin-reg-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Sticky header so column meaning survives a long scroll */
.fin-reg-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--color-background-tertiary);
    border-bottom: 1px solid var(--color-border-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    padding: 7px 8px;
    white-space: nowrap;
}

.fin-reg-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--color-border-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fin-reg-table .fin-num { text-align: right; }

/* Column widths — address and client get the slack */
.fin-reg-date   { width: 64px; }
.fin-reg-job    { width: 56px; color: var(--color-text-secondary); }
.fin-reg-addr   { max-width: 260px; }
.fin-reg-client { max-width: 200px; color: var(--color-text-secondary); }
.fin-reg-type   { width: 54px; }
.fin-reg-net    { width: 88px; font-weight: 600; }
.fin-reg-sv     { width: 78px; }

/* ---- month header rows ---- */

.fin-reg-month {
    cursor: pointer;
    background: var(--color-background-secondary);
}

.fin-reg-month:hover { background: var(--color-background-tertiary); }

.fin-reg-month td {
    position: sticky;
    top: 30px;
    z-index: 2;
    background: inherit;
    font-weight: 700;
    font-size: 12px;
    color: var(--color-text-primary);
    border-top: 1px solid var(--color-border-primary);
    border-bottom: 1px solid var(--color-border-primary);
}

.fin-reg-now td {
    background: var(--color-bg-info);
    color: var(--color-text-info);
}

.fin-reg-future td { color: var(--color-text-secondary); }

.fin-reg-caret {
    display: inline-block;
    width: 12px;
    color: var(--color-text-tertiary);
}

.fin-reg-count {
    font-weight: 400;
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-left: 8px;
}

/* ---- tags ---- */

.fin-reg-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: var(--border-radius-sm);
    margin-left: 6px;
    vertical-align: middle;
}

.fin-reg-actual  { background: var(--color-bg-success); color: #14532d; }
.fin-reg-est     { background: var(--color-bg-neutral); color: var(--color-text-secondary); }
.fin-reg-current { background: var(--color-text-info); color: #fff; }

/* ---- job rows ---- */

.fin-reg-row:hover { background: var(--color-background-secondary); }

/* Forecast rows sit visually behind actuals */
.fin-reg-est-row .fin-reg-net,
.fin-reg-est-row .fin-reg-sv { color: var(--color-text-secondary); }

.fin-reg-typecode {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-neutral);
    color: var(--color-text-secondary);
}

/* ---- inline flags: what the timelines used to say ---- */

.fin-reg-flag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: var(--border-radius-sm);
    margin-left: 5px;
    vertical-align: middle;
    cursor: help;
}

.fin-flag-early   { background: var(--color-bg-warning); color: #854d0e; }
.fin-flag-overdue { background: var(--color-bg-danger);  color: #991b1b; }
.fin-flag-paid    { background: var(--color-bg-success); color: #14532d; }

/* ---- grand total ---- */

.fin-reg-grand td {
    position: sticky;
    bottom: 0;
    background: var(--color-background-tertiary);
    border-top: 2px solid var(--color-border-primary);
    font-weight: 700;
    font-size: 12px;
    padding: 8px;
}

/* ---------------- v2: timing columns, editing, overrides ---------------- */

.fin-reg-days {
    width: 52px;
    color: var(--color-text-secondary);
    font-size: 11px;
}

/* Slow production or slow payment */
.fin-reg-slow {
    color: var(--color-text-warning);
    font-weight: 600;
}

/* ---- editable net cell ---- */

.fin-reg-editable {
    cursor: text;
    position: relative;
}

.fin-reg-editable:hover {
    background: var(--color-bg-info);
    box-shadow: inset 0 0 0 1px var(--color-text-info);
    border-radius: var(--border-radius-sm);
}

.fin-reg-override {
    color: var(--color-text-info);
    font-weight: 700;
    margin-left: 2px;
    cursor: help;
}

.fin-reg-editing {
    background: var(--color-bg-info);
    white-space: nowrap;
}

.fin-reg-input {
    width: 74px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding: 2px 5px;
    border: 1px solid var(--color-text-info);
    border-radius: var(--border-radius-sm);
    background: var(--color-background-primary);
    color: var(--color-text-primary);
}

.fin-reg-input:focus { outline: none; }

.fin-reg-ok,
.fin-reg-cancel {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 13px;
    padding: 0 3px;
    line-height: 1;
}

.fin-reg-ok     { color: var(--color-text-success); }
.fin-reg-cancel { color: var(--color-text-tertiary); }
.fin-reg-ok:hover, .fin-reg-cancel:hover { opacity: 0.7; }

/* ---------------- v2: editable net, timings views ---------------- */

.fin-reg-editable {
    cursor: pointer;
    position: relative;
}

.fin-reg-editable:hover {
    background: var(--color-bg-info);
    box-shadow: inset 0 0 0 1px var(--color-text-info);
}

.fin-reg-locked { background: var(--color-bg-warning); }

.fin-reg-lock {
    font-size: 10px;
    margin-left: 4px;
    color: var(--color-text-warning);
    cursor: help;
}

.fin-reg-edit {
    width: 100%;
    border: 1px solid var(--color-text-info);
    border-radius: var(--border-radius-sm);
    padding: 2px 4px;
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: var(--color-background-primary);
    color: var(--color-text-primary);
}

.fin-reg-edit:focus { outline: none; }

/* ---- timing tables ---- */

.fin-timing-table th,
.fin-timing-table td { padding: 7px 8px; }

.fin-timing-bar-h { width: 200px; }

.fin-timing-track {
    height: 10px;
    background: var(--color-background-tertiary);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.fin-timing-bar {
    height: 100%;
    background: var(--color-text-info);
    border-radius: var(--border-radius-sm);
}

.fin-pay-good { color: var(--color-text-success); }
.fin-pay-ok   { color: var(--color-text-warning); }
.fin-pay-bad  { color: var(--color-text-danger); }

/* ---------------- v3: derived net, editable surveyor cells ---------------- */

/* Net is computed from the surveyor columns — not a click target. */
.fin-reg-derived {
    cursor: help;
    color: var(--color-text-primary);
    font-weight: 600;
}

.fin-reg-derived:hover { background: transparent; }

/* Empty surveyor cell shows a faint + so it reads as fillable. */
.fin-reg-dash {
    color: var(--color-border-primary);
    font-weight: 400;
}

.fin-reg-editable:hover .fin-reg-dash { color: var(--color-text-info); }

/* Job billed across several months */
.fin-flag-multi {
    background: var(--color-bg-info);
    color: var(--color-text-info);
    margin-left: 4px;
}