/* ============================================================================
   Process list columns — deadline, billing, last activity.

   Three cells that all say the same kind of thing: a fact on the first line and what it
   means on the second. They share a scale and a colour vocabulary so a row reads across
   rather than as three unrelated widgets, and they are named per column rather than per
   view — every one of them works on any business process list.
   ========================================================================== */

:root {
    --pl-text: #2c3346;
    --pl-muted: #6b7280;
    --pl-muted-2: #9ca3af;
    --pl-line: #e3e6ec;
    --pl-panel-2: #fafbfc;

    --pl-green: #d1fae5;
    --pl-green-line: #a7f3d0;
    --pl-green-deep: #065f46;
    --pl-amber: #fef3c7;
    --pl-amber-line: #fde68a;
    --pl-amber-deep: #92400e;
    --pl-red: #fee2e2;
    --pl-red-line: #fecaca;
    --pl-red-deep: #991b1b;
}

/* Two-line cells: the grid centres a single line, and these need to sit as a block. */
.pdd,
.pla,
.pbc {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.3;
}

/* ── Deadline ─────────────────────────────────────────────────────────────── */

.pdd-date,
.pla-date {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--pl-text);
}

.pdd-note,
.pla-note {
    font-size: 10.5px;
    color: var(--pl-muted);
    white-space: nowrap;
}

/* Inside the last few days the second line carries the weight, because that is the part
   the reader is deciding on. */
.pdd.is-soon .pdd-note { color: var(--pl-amber-deep); font-weight: 600; }

.pdd.is-late .pdd-date { color: var(--pl-red-deep); font-weight: 600; }

/* A closed case still has a date; it just no longer counts down. Muted so it reads as
   history rather than as a deadline being met. */
.pdd.is-past .pdd-date { color: var(--pl-muted-2); }

/* Overdue is the one state that gets a badge — everything else is a note, and a badge on
   all of them would leave nothing standing out. */
.pdd-flag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--pl-red-deep);
    background: var(--pl-red);
    border: 1px solid var(--pl-red-line);
    border-radius: 4px;
    padding: 0 5px;
    line-height: 16px;
    white-space: nowrap;
}

/* ── Last activity ────────────────────────────────────────────────────────── */

.pla-empty {
    font-size: 11px;
    color: var(--pl-muted-2);
}

/* ── Billing ──────────────────────────────────────────────────────────────── */

.pbc-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pbc-pill {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 17px;
    white-space: nowrap;
    flex: 0 0 auto;
    border: 1px solid var(--pl-line);
    background: #f2f4f7;
    color: var(--pl-text);
}

/* Covered by a contract is the quiet case — nothing is owed, so the pill states the fact
   without claiming any attention. */
.pbc-pill.is-included { background: #eef0f4; color: #4b5563; }
.pbc-pill.is-chargeable { background: var(--pl-green); color: var(--pl-green-deep); border-color: var(--pl-green-line); }
.pbc-pill.is-overdue { background: var(--pl-red); color: var(--pl-red-deep); border-color: var(--pl-red-line); font-weight: 600; }
.pbc-pill.is-rejected { background: var(--pl-panel-2); color: var(--pl-muted); }

/* The invoice number, or the price standing in for one. Ellipsised rather than wrapped:
   the pill beside it is what the reader scans, and the number is the follow-up. */
.pbc-ref {
    font-size: 11px;
    color: var(--pl-muted);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pbc-detail {
    font-size: 11px;
    color: var(--pl-muted);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pbc-detail.is-good { color: var(--pl-green-deep); font-weight: 600; }
.pbc-detail.is-warn { color: var(--pl-amber-deep); font-weight: 600; }
.pbc-detail.is-bad { color: var(--pl-red-deep); font-weight: 700; }