/* =============================================================================
   DEX Portal - Finance / Invoices

   The dashboard widgets, the invoice table, the invoice panel's five tabs and
   the document preview. Same tokens as everything else; the only colour that
   is new here belongs to invoice statuses.
   ============================================================================= */

/* ---- Dashboard widgets ---------------------------------------------------- */

.invoice-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.invoice-widget {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-large);
    background: var(--surface-panel);
    box-shadow: var(--shadow-card);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color var(--duration-instant) var(--easing-standard),
                box-shadow var(--duration-instant) var(--easing-standard);
}

.invoice-widget:disabled {
    cursor: default;
}

.invoice-widget:not(:disabled):hover {
    border-color: var(--border-strong);
}

.invoice-widget--active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.invoice-widget__value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.invoice-widget__label {
    font-size: var(--font-size-tiny);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.invoice-widget--success .invoice-widget__value { color: var(--status-success); }
.invoice-widget--danger  .invoice-widget__value { color: var(--status-danger); }
.invoice-widget--warning .invoice-widget__value { color: var(--status-warning); }
.invoice-widget--info    .invoice-widget__value { color: var(--status-info); }

/* ---- Toolbar + table ------------------------------------------------------ */

.invoice-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
}

.invoice-toolbar--right {
    justify-content: flex-end;
}

.invoice-search {
    max-width: 320px;
}

.invoice-table tbody tr {
    cursor: pointer;
}

.invoice-table tbody tr:hover {
    background: var(--surface-subtle);
}

.invoice-row__number {
    font-weight: 600;
    color: var(--text-primary);
}

.invoice-status {
    display: inline-flex;
    padding: 2px 9px;
    border-radius: var(--radius-button);
    font-size: var(--font-size-tiny);
    font-weight: 600;
}

.invoice-status--draft        { background: var(--status-neutral-tint); color: var(--status-neutral); }
.invoice-status--sent         { background: var(--status-info-tint); color: var(--status-info); }
.invoice-status--paid         { background: var(--status-success-tint); color: var(--status-success); }
.invoice-status--overdue      { background: var(--status-danger-tint); color: var(--status-danger); }
.invoice-status--partial      { background: var(--status-warning-tint); color: var(--status-warning); }
/* Asked for and not yet arrived. Warning rather than danger: it is not late,
   it is outstanding, and the two want to look different at a glance. */
.invoice-status--awaiting_payment { background: var(--status-warning-tint); color: var(--status-warning); }
.invoice-status--payment_plan { background: var(--accent-tint); color: var(--accent); }

/* ---- Panel shell ---------------------------------------------------------- */

.invoice-panel__content {
    padding-top: 14px;
}

.invoice-section {
    padding: 15px 16px;
    margin-bottom: 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-large);
    background: var(--surface-panel);
    box-shadow: var(--shadow-card);
}

.invoice-section__title {
    margin: 0 0 10px;
    font-size: var(--font-size-medium);
    font-weight: 600;
    color: var(--text-primary);
}

.invoice-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px 14px;
}

.invoice-hint {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

.invoice-client-facts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

.invoice-client-facts span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow-wrap: anywhere;
}

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

.invoice-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.invoice-items-table th {
    padding: 4px 6px;
    text-align: left;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-default);
}

.invoice-items-table td {
    padding: 6px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}

.invoice-items-table .num,
.invoice-items-table th.num {
    text-align: right;
}

.invoice-item-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-small);
    background: var(--surface-panel);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-small);
}

.invoice-item-input:focus {
    outline: none;
    border-color: var(--accent);
}

.invoice-item-input--small {
    width: 84px;
    text-align: right;
}

.invoice-item-product {
    margin-bottom: 4px;
}

.invoice-item-total {
    font-weight: 600;
    white-space: nowrap;
    padding-top: 12px;
}

.invoice-item-remove-cell {
    width: 30px;
    padding-top: 9px;
}

/* ---- Totals --------------------------------------------------------------- */

.invoice-totals {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 340px;
    margin-left: auto;
}

.invoice-totals__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

.invoice-totals__row--grand {
    padding-top: 8px;
    border-top: 2px solid var(--text-primary);
    font-weight: 700;
    font-size: var(--font-size-medium);
    color: var(--text-primary);
}

.invoice-totals__row--muted {
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

/* ---- Payment options ------------------------------------------------------ */

.invoice-pay-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.invoice-pay-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
    cursor: pointer;
}

.invoice-pay-option input {
    position: absolute;
    opacity: 0;
}

.invoice-pay-option--active {
    border-color: var(--accent);
    background: var(--accent-tint);
}

.invoice-pay-option__label {
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.invoice-pay-option__description {
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

.invoice-deposit-field {
    margin-top: 10px;
    max-width: 240px;
}

.invoice-schedule {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.invoice-schedule__row {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
    font-size: var(--font-size-small);
}

.invoice-schedule__row .num {
    font-weight: 600;
    text-align: right;
}

.invoice-schedule__state {
    font-size: var(--font-size-tiny);
    font-weight: 600;
    padding: 1px 8px;
    border-radius: var(--radius-button);
}

.invoice-schedule__state--paid    { background: var(--status-success-tint); color: var(--status-success); }
.invoice-schedule__state--late    { background: var(--status-danger-tint); color: var(--status-danger); }
.invoice-schedule__state--pending { background: var(--status-neutral-tint); color: var(--status-neutral); }

/* ---- Payments tab --------------------------------------------------------- */

.invoice-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
    margin-bottom: 8px;
}

.invoice-payment-row--refund {
    background: var(--status-danger-tint);
    border-color: var(--status-danger-tint);
}

.invoice-payment-row__amount {
    font-weight: 700;
    color: var(--text-primary);
}

.invoice-payment-row__meta {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
}

/* ---- History -------------------------------------------------------------- */

.invoice-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.invoice-history__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.invoice-history__badge {
    flex: none;
    min-width: 96px;
    text-align: center;
    padding: 2px 8px;
    border-radius: var(--radius-button);
    background: var(--status-neutral-tint);
    color: var(--status-neutral);
    font-size: var(--font-size-tiny);
    font-weight: 600;
}

.invoice-history__badge--payment_success { background: var(--status-success-tint); color: var(--status-success); }
.invoice-history__badge--payment_failure,
.invoice-history__badge--refund          { background: var(--status-danger-tint); color: var(--status-danger); }
.invoice-history__badge--sent,
.invoice-history__badge--viewed          { background: var(--status-info-tint); color: var(--status-info); }

.invoice-history__detail {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-small);
    color: var(--text-primary);
}

.invoice-history__meta {
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
}

/* ---- Comments ------------------------------------------------------------- */

.invoice-comment {
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
    margin-bottom: 8px;
}

.invoice-comment--client {
    background: var(--status-info-tint);
    border-color: #d3e3ff;
}

.invoice-comment__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--text-primary);
}

.invoice-comment__badge {
    font-size: var(--font-size-tiny);
    font-weight: 600;
    padding: 1px 8px;
    border-radius: var(--radius-button);
    background: var(--surface-panel);
    color: var(--text-muted);
}

.invoice-comment__body {
    margin: 6px 0 0;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    white-space: pre-wrap;
}

/* ---- Preview document ----------------------------------------------------- */

.invoice-doc-frame {
    padding: 20px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-large);
    background: var(--surface-panel);
    box-shadow: var(--shadow-card);
}

.invoice-doc__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.invoice-doc__brand {
    font-size: 19px;
    font-weight: 700;
}

.invoice-doc__brand img {
    max-height: 54px;
}

.invoice-doc__meta {
    text-align: right;
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}

.invoice-doc__number {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.invoice-doc__parties h4,
.invoice-doc__section h4 {
    margin: 0 0 4px;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.invoice-doc__parties {
    margin-bottom: 18px;
    font-size: var(--font-size-base);
}

.invoice-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

.invoice-doc th {
    text-align: left;
    padding: 6px 8px;
    font-size: var(--font-size-tiny);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--divider-colour);
}

.invoice-doc td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--font-size-base);
}

.invoice-doc .num {
    text-align: right;
}

.invoice-doc__totals {
    margin-left: auto;
    max-width: 280px;
}

.invoice-doc__totals td {
    border: none;
    padding: 3px 8px;
}

.invoice-doc__grand td {
    font-weight: 700;
    border-top: 2px solid var(--text-primary);
}

.invoice-doc__section {
    margin-top: 14px;
    font-size: var(--font-size-base);
}

.invoice-doc__footer {
    margin-top: 28px;
    padding-top: 10px;
    border-top: 1px solid var(--border-default);
    color: var(--text-muted);
    font-size: var(--font-size-tiny);
    text-align: center;
}

/* ---- Settings ------------------------------------------------------------- */

.finance-settings-content {
    padding-top: 6px;
    max-width: 760px;
}

.finance-template {
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
    margin-bottom: 10px;
}

.finance-template__name {
    font-weight: 600;
    margin-bottom: 6px;
}

/* ---- Cards on file (client profile Payments tab + invoice panel) ---------- */

.record-cards {
    padding: 15px 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-large);
    background: var(--surface-panel);
    box-shadow: var(--shadow-card);
}

.record-cards__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.record-cards__title {
    margin: 0;
    font-size: var(--font-size-medium);
    font-weight: 600;
    color: var(--text-primary);
}

.record-cards__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.record-cards__form {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
}

.record-cards__form-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

/* ---- Main tab redesign ---------------------------------------------------- */

/* Section headings pick up the same tinted icon chip the client profile wears,
   so the two ends of the product read as one. */
.invoice-section__title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.invoice-section__glyph {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-small);
    background: var(--accent-tint);
    color: var(--accent);
}

/* The invoice number as a plate, not a disabled input pretending to be one. */
.invoice-number-plate {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
}

.invoice-number-plate__number {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.invoice-number-plate__note {
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

/* Status as pills: every state visible, the true one lit in its own colour. */
.invoice-status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.invoice-status-pill {
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    padding: 4px 12px;
    font: inherit;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    cursor: pointer;
    opacity: 0.45;
    filter: saturate(0.4);
    transition: opacity var(--duration-instant) var(--easing-standard),
                filter var(--duration-instant) var(--easing-standard),
                box-shadow var(--duration-instant) var(--easing-standard);
}

.invoice-status-pill:hover {
    opacity: 0.8;
    filter: saturate(0.9);
}

.invoice-status-pill--active {
    opacity: 1;
    filter: none;
    box-shadow: 0 0 0 1.5px currentColor;
}

/* Items as stacked cards - six columns of table have nowhere to go at 30vw. */
.invoice-item-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.invoice-item-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
}

.invoice-item-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invoice-item-card__top .invoice-item-product {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.invoice-item-card__figures {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.invoice-item-figure {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
}

.invoice-item-figure > span:first-child {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.invoice-item-figure .invoice-item-input {
    width: 100%;
    text-align: right;
}

.invoice-item-figure--total {
    align-items: flex-end;
    flex: 1.2 1 0;
}

.invoice-item-figure--total .invoice-item-total {
    padding: 6px 0;
    font-size: var(--font-size-medium);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.invoice-add-line {
    width: 100%;
    justify-content: center;
}

/* The money card - white like every other card, the grand total in the brand
   gradient so the number still leads the panel. */
.invoice-hero {
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-large);
    background: var(--surface-panel);
    box-shadow: var(--shadow-card);
}

.invoice-hero__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-default);
}

.invoice-hero__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--font-size-small);
    color: var(--text-muted);
}

.invoice-hero__row > span:last-child {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.invoice-hero__discount {
    width: 90px;
}

.invoice-hero__discount:focus {
    border-color: var(--accent);
}

.invoice-hero__grand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 4px;
}

.invoice-hero__grand-label {
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.invoice-hero__grand-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.invoice-hero__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

.invoice-hero__footer strong {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Payment option cards get a lit check when chosen. */
.invoice-pay-option {
    transition: border-color var(--duration-instant) var(--easing-standard),
                background var(--duration-instant) var(--easing-standard);
}

.invoice-pay-option--active .invoice-pay-option__label::after {
    content: '✓';
    margin-left: 6px;
    color: var(--accent);
    font-weight: 700;
}

/* ---- Main tab: two-column layout ------------------------------------------ */

/* Circumstances on the left, the billed work and its money on the right -
   the items side takes the larger share because it is the side that grows. */
.invoice-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 14px;
    align-items: start;
}

.invoice-main-grid__column {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

@container (max-width: 700px) {
    .invoice-main-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Item lines: one row of name / qty / price (/ tax) / total / bin, with the
   optional description tucked under the row it belongs to. */
.invoice-items-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.invoice-items-header > span:first-child { flex: 1 1 auto; }
.invoice-items-header > .num { flex: none; width: 62px; text-align: right; }
.invoice-items-header > span:last-child { flex: none; width: 26px; }

.invoice-item-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.invoice-item-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
}

.invoice-item-row__line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invoice-item-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}

.invoice-item-row__line .invoice-item-input.num {
    flex: none;
    width: 62px;
    text-align: right;
}

.invoice-item-row__line .invoice-item-total {
    flex: none;
    min-width: 62px;
    text-align: right;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    padding-top: 0;
    font-size: var(--font-size-base);
}

.invoice-item-row .invoice-item-description {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

/* Pay options as compact choices in a column card - label + tick, no essay. */
.invoice-pay-options {
    grid-template-columns: 1fr;
    gap: 8px;
}

.invoice-pay-option {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
}

/* The preview's item description sits small under its title. */
.invoice-doc__item-note {
    margin-top: 2px;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

/* ---- Header status pill + breathing room ---------------------------------- */

/* The status pill in the panel header: the invoice-status colours, sized to
   sit among the header action buttons, clickable to change. */
.invoice-header-status {
    border: none;
    font: inherit;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    padding: 6px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: box-shadow var(--duration-instant) var(--easing-standard);
}

.invoice-header-status:hover {
    box-shadow: 0 0 0 1.5px currentColor;
}

/* Fields inside the invoice cards get room to breathe. */
.invoice-section .form-field {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.invoice-section .form-field:last-child {
    margin-bottom: 4px;
}

.invoice-field-grid {
    gap: 12px 16px;
    margin-bottom: 14px;
}

.invoice-section .invoice-client-facts {
    margin-top: 0;
    margin-bottom: 14px;
}

.invoice-item-input {
    padding: 8px 10px;
}

.invoice-item-row {
    padding: 12px;
    gap: 8px;
}


/* Billing model - subscription cycle badge on invoice item rows, and the
   one-time / subscription split rows inside the totals card. */
.invoice-item-cycle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-button);
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.invoice-item-cycle[hidden] {
    display: none;
}

.invoice-hero__cycle {
    font-style: normal;
    font-size: 11px;
    opacity: 0.65;
}


/* Subscriptions - status pills reuse the invoice pill shape with their own
   palette, and the panel's slim item rows drop the tax column. */
.invoice-status--sub-active {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.invoice-status--sub-trialing {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.invoice-status--sub-paused {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.invoice-status--sub-cancelled {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
}

.subscription-hero .invoice-hero__grand {
    border-top: none;
    padding-top: 0;
}


/* Subscription lifecycle - the status pill and its pause/cancel/reactivate
   buttons at the top of the Plan card. */
.subscription-lifecycle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.subscription-lifecycle .invoice-status {
    margin-right: auto;
}

.invoice-status--sub-ended {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
}

/* A five-year monthly term is sixty rows - scroll them, don't stretch the
   panel to the floor. */
.invoice-schedule--scroll {
    max-height: 300px;
    overflow-y: auto;
}

/* -----------------------------------------------------------------------------
   FINANCE PAGE GUTTERS

   The finance pages lay widgets, toolbars and tables straight onto the page
   surface, which put them flush against the edges. Give them the same
   horizontal gutter the page header already uses.
   -------------------------------------------------------------------------- */
.invoice-widgets {
    margin: 14px var(--gutter);
}

.invoice-toolbar {
    margin: 0 var(--gutter) 12px;
}

/* Inside the settings content the gutter is already applied by the container -
   the products toolbar must not double it. */
.finance-settings-content .invoice-toolbar {
    margin: 0 0 12px;
}

#invoiceTable,
#subscriptionTable {
    padding: 0 var(--gutter) var(--gutter);
    overflow: auto;
}

#financeSettingsTabs {
    margin: 0 var(--gutter);
}

.finance-settings-content {
    padding: 6px var(--gutter) var(--gutter);
}


/* Widgets inside a panel tab - the page-level gutter margin would double the
   panel's own padding, and these are figures, not filters. */
.invoice-widgets--panel {
    margin: 0 0 14px;
}

.invoice-widgets--panel .invoice-widget:disabled {
    cursor: default;
    opacity: 1;
}

.record-cards--history {
    margin-bottom: 14px;
}

/* -----------------------------------------------------------------------------
   DEX ACCESS - ruled lines, not cards.

   This tab is a list of facts about ONE account: the address, the PIN, the
   second factor, whether access is on. Boxing those groups made them read as
   separate things, and the row weight competed with the headings for
   attention. Only the headings carry weight now; everything else is quiet.
   -------------------------------------------------------------------------- */
.access-section { margin-bottom: 26px; }
.access-section:last-child { margin-bottom: 0; }

.access-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.access-head__title {
    margin: 0; font-size: var(--font-size-medium); font-weight: 600;
    color: var(--text-primary); letter-spacing: -.01em;
}

.access-list { border-top: 1px solid var(--border-subtle, #e7e9ee); }

.access-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle, #e7e9ee);
}
.access-row__text {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.access-row__value {
    font-size: 13px; font-weight: 400; color: var(--text-primary);
}
.access-row__meta {
    font-size: 12px; line-height: 1.5; color: var(--text-secondary);
}
.access-row__actions {
    display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
}

.access-note {
    margin: 0; padding-top: 10px; font-size: 12px; line-height: 1.6;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-subtle, #e7e9ee);
}

@media (max-width: 620px) {
    .access-row { align-items: flex-start; flex-direction: column; gap: 10px; }
    .access-row__actions { width: 100%; }
}

/* Two tables on one tab (the project's Docs tab: documents, then forms).
   Bare, the way the Tasks tab is bare - a panel tab is already a panel, and
   boxing its tables in cards only adds borders to look through. All the
   heading does is say which table is which. */
.tab-table-heading {
    margin: 0 0 10px;
    font-size: var(--font-size-medium);
    font-weight: 600;
    color: var(--text-primary);
}

.tab-table-heading--second {
    margin-top: 26px;
}

.tab-table-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

/* A heading with one quiet action beside it (the client record's Tasks tab).
   Secondary, not primary: a tab somebody is usually just reading should not
   look like a call to action, so the button sits at the weight of the heading
   rather than shouting over it. */
.tab-table-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.tab-table-bar .tab-table-heading {
    margin: 0;
}

/* The subscription's pay link: the URL fills the row, Copy and Open sit
   beside it and never shrink. Read-only, so it reads as a fact rather than a
   field somebody is meant to fill in. */
.subscription-paylink {
    display: flex;
    align-items: center;
    gap: 8px;
}

.subscription-paylink .form-field__control {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-monospace);
    font-size: var(--font-size-small);
    color: var(--text-muted);
    background: var(--surface-subtle);
}

.subscription-paylink .button {
    flex: 0 0 auto;
}

/* The client profile's Payments tab is a STACK of panels - the three widgets,
   payments received, cards on file, invoices, subscriptions. Each panel styles
   itself but none of them owns the space between, so the tab used to read as
   one sheet with lines ruled through it. The rhythm belongs to the stack:
   one gap value, and air at the top and bottom so nothing is jammed against
   the tab strip or the bottom of the panel. */
.payments-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px 0 32px;
}

/* Margins the individual panels carry would fight the gap and make the
   spacing uneven, so inside the stack the gap is the only spacing. */
.payments-stack > * {
    margin-top: 0;
    margin-bottom: 0;
}


/* -----------------------------------------------------------------------------
   AUTOMATIONS BOARD

   One column per status, rules stacked as cards under a tinted header -
   the Flowlu-style board, in DEX's own palette.
   -------------------------------------------------------------------------- */
.automation-entity-tabs {
    margin: 12px var(--gutter) 0;
}

.automation-board {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 14px var(--gutter) var(--gutter);
    overflow-x: auto;
    flex: 1;
    min-height: 0;
}

/* Each column is a tinted tray rather than loose items on white. Without it
   the phases run together into one field of cards and it takes a second to
   see which rule belongs to which phase - which is the only question this
   board exists to answer. */
.automation-column {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-large, 14px);
    background: var(--surface-subtle);
}

/* The head sits ON the tray, so it is the panel colour - the tone modifiers
   below still override it where Finance wants a tinted status header. */
.automation-column__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--radius-medium);
    font-weight: 600;
    font-size: 13.5px;
    border-left: 4px solid transparent;
    background: var(--surface-panel);
}

.automation-column__head--neutral  { border-left-color: #94a3b8; background: rgba(148, 163, 184, 0.12); }
.automation-column__head--info     { border-left-color: #3b82f6; background: rgba(59, 130, 246, 0.10); }
.automation-column__head--violet   { border-left-color: #8b5cf6; background: rgba(139, 92, 246, 0.10); }
.automation-column__head--warning  { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.automation-column__head--danger   { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.10); }
.automation-column__head--success  { border-left-color: #22c55e; background: rgba(34, 197, 94, 0.10); }

.automation-column__count {
    font-size: 12px;
    color: var(--text-muted);
}

/* The cards live in their own wrapper, so the column's gap never reached
   them - they stacked flush and two rules on one phase read as one tall
   card. Same 10px rhythm as everything else in the column. */
.automation-column__cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.automation-create {
    padding: 9px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
    color: #4f46e5;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 120ms ease;
}

.automation-create:hover {
    background: rgba(99, 102, 241, 0.08);
}

.automation-menu {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.automation-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: none;
    background: none;
    border-radius: var(--radius-small, 6px);
    font-size: 13.5px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
}

.automation-menu__item:hover {
    background: var(--surface-subtle);
}

.automation-card {
    position: relative;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    padding: 10px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* A row in a listing table that opens nothing. The call log is the case: it
   shares the table with the tabs beside it, but a past call has no record to
   open - only a Call button to dial again. Without this it would offer the
   pointer and the hover of a row that goes somewhere, and go nowhere. */
.invoice-row--static {
    cursor: default;
}

/* The run-status badge on a card's right edge. */
.automation-card__status {
    position: absolute;
    top: 8px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.automation-card__status--ok {
    color: #16a34a;
}

.automation-card__status--fail {
    color: #dc2626;
}

.automation-card__status--wait {
    color: #b45309;
}

/* "Not run yet" wears the same cross as a failure - the shape answers "done
   or not" - but in grey. A rule written a minute ago has not gone wrong, and
   a column of red crosses on a board nobody has used yet teaches people to
   ignore the colour entirely, which is the one thing it must not do. */
.automation-card__status--idle {
    color: var(--text-muted, #9aa3ad);
    opacity: 0.75;
}

/* The sand-timer badge turns over, as if it were being flipped. */
.automation-card__status--wait .icon {
    transform-origin: 50% 50%;
    animation: automation-hourglass-twist 1.6s ease-in-out infinite;
}

@keyframes automation-hourglass-twist {
    0%, 35% { transform: rotate(0deg); }
    65%, 100% { transform: rotate(180deg); }
}

/* Keep the timing text clear of the badge. */
.automation-card__timing {
    padding-right: 22px;
}

.automation-card--off {
    opacity: 0.55;
}

.automation-card__timing {
    font-size: 11.5px;
    color: var(--text-muted);
}

.automation-card__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13.5px;
}

.automation-card__icon {
    display: inline-flex;
    color: #4f46e5;
}

/* Edit on the left, the move chevrons on the right, sharing the hairline the
   Edit button used to own on its own. */
.automation-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px;
}

.automation-card__edit {
    border: none;
    background: none;
    padding: 8px 0;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.automation-card__edit:hover {
    color: #4f46e5;
}

.automation-card__moves {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* The move buttons stay quiet until the card is under the pointer. A column
   of chevrons competing with the rule names is noise; the order only matters
   when somebody is thinking about the order. */
.automation-card__moves .field-move__button {
    opacity: 0;
    transition: opacity 140ms ease;
}

.automation-card:hover .field-move__button,
.automation-card__moves .field-move__button:focus-visible {
    opacity: 1;
}

/* Touch has no hover, so there they are always on. */
@media (hover: none) {
    .automation-card__moves .field-move__button {
        opacity: 1;
    }
}

.automation-conditions {
    padding: 10px 12px;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-medium);
    margin-bottom: 12px;
}


/* -----------------------------------------------------------------------------
   MONEY MODULE
   -------------------------------------------------------------------------- */
.money-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.money-content #moneyTable {
    padding: 0 var(--gutter) var(--gutter);
}

.money-in { color: #15803d; }
.money-out { color: #b91c1c; }

.money-account-filter {
    max-width: 220px;
}

.money-reconcile-tick {
    width: 34px;
}

.money-reconcile-tick input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}


/* Ledger entry viewer - read-only detail rows. */
.money-view-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}

.money-view-row > span {
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.money-view-row > strong {
    font-weight: 600;
    text-align: right;
}


/* Expense receipts */
.money-receipt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-subtle);
    margin-bottom: 8px;
}

.money-receipt__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.money-receipt__input {
    padding: 8px;
}

/* -----------------------------------------------------------------------------
   PAYMENT CALENDAR
   -------------------------------------------------------------------------- */
.calendar-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: var(--gutter);
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 var(--gutter) 12px;
}

.calendar-toolbar__month {
    font-weight: 700;
    font-size: 15px;
    min-width: 150px;
    text-align: center;
}

.calendar-toolbar__legend {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin: 0 var(--gutter);
}

.calendar-grid--head {
    margin-bottom: 6px;
}

.calendar-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0 8px;
}

.calendar-cell {
    min-height: 96px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-medium);
    background: var(--surface-panel);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendar-cell--blank {
    background: transparent;
    border-color: transparent;
}

.calendar-cell--today {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35);
}

.calendar-cell__day {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
}

.calendar-cell--today .calendar-cell__day {
    color: #4f46e5;
}

.calendar-cell__chips {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

.calendar-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border: none;
    border-radius: var(--radius-button);
    padding: 3px 7px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    min-width: 0;
}

.calendar-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.calendar-chip__amount {
    flex: none;
    font-variant-numeric: tabular-nums;
}

.calendar-chip--invoice {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

.calendar-chip--subscription {
    background: rgba(139, 92, 246, 0.12);
    color: #6d28d9;
}

.calendar-chip--overdue {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.calendar-chip--legend {
    cursor: default;
    padding: 3px 10px;
}


/* -----------------------------------------------------------------------------
   PROJECTS - pipeline ribbon, record cards, activity stream
   -------------------------------------------------------------------------- */
#projectTable {
    padding: 0 var(--gutter) var(--gutter);
    overflow: auto;
}

/* The chevron ribbon: every stage an arrow flowing into the next, the current
   one lit. Shapes are clip-path chevrons with a hairline of background
   showing between them, exactly like the reference. The block runs to the
   panel's edges the way the tab strip above it does - the pipeline is the
   width of the record, not of a column. */
.project-pipeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 calc(var(--gutter-tight) * -1);
    padding: 0 var(--gutter-tight);
}

/* Which pipeline this project runs on. With one it is stated; with several it
   becomes a picker, because then it is a decision somebody gets to make. */
.project-pipeline__name {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

.project-pipeline__picker {
    align-self: flex-start;
    max-width: 280px;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-size-base);
    cursor: pointer;
}

.project-pipeline__picker:hover {
    border-color: var(--border-default);
    background: var(--surface-panel);
}


/* -----------------------------------------------------------------------------
   THE PIPELINE BOARD - Projects › Automations › Workflows

   The finance automation board wearing project clothes: one column per phase,
   its name editable in place because renaming is what this screen is for, its
   colour a row of swatches under it, and Create Rule at the foot exactly where
   Finance puts it.
   -------------------------------------------------------------------------- */
.pipeline-board {
    align-items: flex-start;
}

.pipeline-column__head {
    display: flex;
    align-items: center;
    gap: 6px;
    border-left: 4px solid var(--phase-colour, #8b93a7);
}

.pipeline-column__name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    background: none;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
}

.pipeline-column__name:hover:not(:disabled) {
    border-color: var(--border-default);
    background: var(--surface-panel);
}

.pipeline-column__name:focus {
    border-color: var(--accent);
    background: var(--surface-panel);
    outline: none;
}

.pipeline-column__moves {
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
}

.pipeline-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 10px 2px;
}

.pipeline-swatch {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    padding: 0;
}

.pipeline-swatch:hover {
    transform: scale(1.12);
}

.pipeline-swatch--chosen {
    border-color: var(--text-primary);
}

.pipeline-column--add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 1px dashed var(--border-default);
    background: none;
    box-shadow: none;
}

.pipeline-add-phase {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius-medium);
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: 600;
    cursor: pointer;
}

.pipeline-add-phase:hover {
    background: var(--accent-tint);
}

/* The phases of a pipeline, listed on the table row that owns them. */
.pipeline-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pipeline-chip {
    padding: 2px 8px;
    border-radius: var(--radius-button);
    color: #ffffff;
    font-size: var(--font-size-tiny);
    font-weight: 600;
    white-space: nowrap;
}

.pipeline-bar__track {
    display: flex;
    gap: 3px;
    width: 100%;
}

.pipeline-stage {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    cursor: pointer;
    padding: 9px 6px 9px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: #8b93a7;
    clip-path: polygon(
        0 0,
        calc(100% - 12px) 0,
        100% 50%,
        calc(100% - 12px) 100%,
        0 100%,
        12px 50%
    );
    transition: filter 120ms ease, background 120ms ease;
}

.pipeline-stage span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* The first arrow has a flat start, the last a flat end - like the image. */
.pipeline-stage:first-child {
    clip-path: polygon(
        0 0,
        calc(100% - 12px) 0,
        100% 50%,
        calc(100% - 12px) 100%,
        0 100%
    );
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    padding-left: 10px;
}

.pipeline-stage:last-child {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        0 100%,
        12px 50%
    );
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pipeline-stage:hover {
    filter: brightness(1.08);
}

.pipeline-stage--current {
    background: #7fa7e0;
}

.pipeline-stage--done {
    background: #a2a9bb;
}

/* -----------------------------------------------------------------------------
   SUMMARY ROW

   When it runs, where it came from, whose it is - the three facts somebody
   wants before they read anything else, so they sit above the cards rather than
   inside one. Dates and source are the same click-to-edit record rows the cards
   use, written larger and without their labels, because the cell already says
   what they are.
   -------------------------------------------------------------------------- */
.project-summary {
    display: flex;
    align-items: center;
    gap: 44px;
    flex-wrap: wrap;
    margin: 16px calc(var(--gutter-tight) * -1) 0;
    padding: 0 var(--gutter-tight) 16px;
    border-bottom: 1px solid var(--border-default);
}

.project-summary__cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.project-summary__label {
    font-size: var(--font-size-small);
    color: var(--text-muted);
}

.project-summary__value {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--font-size-medium);
    font-weight: 600;
    color: var(--text-primary);
}

/* Total Cost leads the row and is the only figure in it, so it carries a
   little more weight than the dates beside it - and the coin sits in a tinted
   disc so the eye finds the money without the number having to shout. */
.project-summary__total {
    gap: 8px;
}

.project-summary__total-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-tint, #eef0ff);
    color: var(--accent, #6366f1);
    line-height: 0;
}

.project-summary__total-value {
    font-size: var(--font-size-large, 17px);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.project-summary__dash {
    color: var(--text-muted);
    font-weight: 500;
}

/* The manager closes the row on the right, name and monogram together. */
.project-summary__cell--manager {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.project-summary__manager {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

/* The manager is a live dropdown wearing the summary's own type: transparent
   until hovered, a caret so it reads as choosable, matching the pipeline
   picker's quiet native-select style. */
.project-summary__manager-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: 220px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606a7b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5.6 9.4 12 15.8l6.4-6.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 12px 12px;
    padding: 2px 24px 2px 8px;
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    font-size: var(--font-size-small);
    text-align: right;
    text-align-last: right;
    cursor: pointer;
    transition:
        border-color var(--duration-instant) var(--easing-standard),
        background-color var(--duration-instant) var(--easing-standard);
}

.project-summary__manager-select:hover {
    border-color: var(--border-default);
    background-color: var(--surface-panel);
}

.project-summary__manager-select:focus {
    outline: none;
    border-color: var(--border-default);
}

.project-summary__avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--text-primary);
    color: var(--text-on-dark);
    font-size: var(--font-size-tiny);
    font-weight: 600;
    overflow: hidden;
}

/* A photo covers the disc entirely, so its colour would only ever show as a
   rim while the image loads. */
.project-summary__avatar--photo { background: none; }

/* A record row written at summary size: no label, no box, just the value. */
.record-row--summary {
    padding: 0;
    gap: 0;
}

.record-row--summary .record-row__value,
.record-row--summary .record-row__input {
    padding: 1px 6px;
    font-size: var(--font-size-medium);
    font-weight: 600;
    line-height: 22px;
}

/* Document sits beside Create but is quieter - it is a second action, not a
   second primary one. */
.slide-over__header-create--quiet {
    background: var(--surface-panel);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}

.slide-over__header-create--quiet:hover:not(:disabled) {
    background: var(--surface-subtle);
    filter: none;
}


/* -----------------------------------------------------------------------------
   COLUMN ONE - HEADINGS AND LINES

   The project record reads as a list, not a grid of boxes: a section heading,
   then its fields printed under it, label above value. Every section the
   administrator adds prints the same way, so a new section looks like it
   belonged there rather than like a widget somebody bolted on.
   -------------------------------------------------------------------------- */
/* A notched field is excluded: the outline it draws IS the field, so stripping
   the border here would leave the label floating over nothing. */
.project-panel .record-section .record-rows > .record-row:not(.record-row--field) {
    padding: 0;
    border: none;
    background: none;
}

.project-panel .record-section .record-rows > .record-row .record-row__label {
    padding-left: 0;
}

.project-panel .record-rows {
    gap: 14px;
}

/* Sentence case rather than shouted: a label that reads "DEX Connection" is
   the administrator's wording, and uppercasing it takes their capitals away. */
.project-panel .record-row__label,
.project-panel .record-row__label--standalone {
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* A standalone label heads a block rather than a value, so it carries the
   weight of a small heading. */
.project-panel .record-row__label--standalone {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    padding: 12px 0 6px;
}


/* -----------------------------------------------------------------------------
   THE CLIENT TILE

   The client is a record in its own right, so the project shows it as one: a
   tile carrying who they are and how to reach them, opening the client record
   beside this panel rather than instead of it. The call and email chips sit
   outside the tile's own button so pressing them rings or writes rather than
   navigating.
   -------------------------------------------------------------------------- */
.client-tile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-tile + .client-tile,
.record-rows + .client-tile {
    margin-top: 10px;
}

.client-tile__open {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.client-tile__open .record-block__glyph {
    margin-top: 0;
}

.client-tile__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.client-tile__name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.client-tile__open:hover .client-tile__name {
    text-decoration: underline;
}

/* The organisation looking at itself: the tile is a plain block, not a link,
   so it neither points nor underlines on hover. */
.client-tile__open--static {
    cursor: default;
}

.client-tile__open--static:hover .client-tile__name {
    text-decoration: none;
}

.client-tile__line {
    font-size: var(--font-size-small);
    color: var(--accent);
    overflow-wrap: anywhere;
}

.client-tile__meta {
    margin-top: 2px;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

.client-tile__actions {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Round chips, coloured all the time: a soft blue for the email, the same
   green the header's call button uses for the number. */
.client-tile__actions .record-row__link {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-medium);
    background: var(--status-info-tint);
    color: var(--status-info);
}

.client-tile__actions .record-row__link--call,
.client-tile__actions .record-row__link--call:hover {
    background: var(--gradient-call-soft);
    color: var(--text-on-dark);
}


/* The project's own fields and the linked client's are drawn with the record
   furniture the client profile uses (.record-section / .record-rows /
   .record-row) - one record look, product-wide. Nothing project-specific is
   needed for them here.

   Activity: the composer wears the client record's composer row - avatar, then
   the prompt - but this one is live, so what gets typed posts. */
.project-activity__field {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 120px;
    padding: 4px 0;
    border: none;
    background: none;
    resize: none;
    font: inherit;
    font-size: var(--font-size-base);
    line-height: 20px;
    color: var(--text-primary);
}

.project-activity__field::placeholder {
    color: var(--text-muted);
}

.project-activity__field:focus {
    outline: none;
}

/* The attached file's name, under the composer row and lined up with it. */
.project-activity__attach-name {
    display: block;
    padding: 8px 0 0 40px;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   PINNED TO THE TOP OF THE FEED

   Money that is late, money about to fall due, a subscription wanting
   attention, and whatever somebody pinned by hand - above the history, because
   they are the reason the project was opened. Each carries its own tone, a
   floating label saying what kind of thing it is, a chevron to the record it
   is about, and a tick meaning "I have dealt with this".
   -------------------------------------------------------------------------- */
.project-alerts {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 20px;
}

.project-alert {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 13px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-large);
    background: var(--surface-subtle);
}

/* The label sits on the card's top edge, so the kind of alert is readable
   before the sentence under it. */
.project-alert__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: var(--radius-button);
    background: var(--text-primary);
    color: var(--text-on-dark);
    font-size: var(--font-size-tiny);
    font-weight: 600;
    white-space: nowrap;
}

.project-alert__glyph {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    background: var(--surface-panel);
}

.project-alert__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    cursor: pointer;
}

.project-alert__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.project-alert__meta {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

.project-alert__open {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: var(--radius-small);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.project-alert__open:hover {
    color: var(--text-primary);
}

/* An empty box that fills in when it is ticked: the same gesture as a checklist,
   because that is what dismissing one of these is. */
.project-alert__tick {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-small);
    background: var(--surface-panel);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--duration-instant) var(--easing-standard),
                border-color var(--duration-instant) var(--easing-standard);
}

.project-alert__tick:hover {
    border-color: var(--text-muted);
}

.project-alert__tick--ticked {
    background: var(--text-primary);
    border-color: var(--text-primary);
}

/* Tones. The tint says how loud it is before a word is read. */
.project-alert--danger {
    border-color: var(--status-danger-tint, rgba(220, 38, 38, 0.25));
    background: rgba(220, 38, 38, 0.06);
}

.project-alert--danger .project-alert__badge { background: #dc2626; }
.project-alert--danger .project-alert__glyph { color: #dc2626; }
.project-alert--danger .project-alert__title { color: #b91c1c; }

.project-alert--warning {
    border-color: rgba(217, 119, 6, 0.28);
    background: rgba(217, 119, 6, 0.07);
}

.project-alert--warning .project-alert__badge { background: #d97706; }
.project-alert--warning .project-alert__glyph { color: #b45309; }

.project-alert--info {
    border-color: rgba(16, 185, 129, 0.28);
    background: rgba(16, 185, 129, 0.07);
}

.project-alert--info .project-alert__badge { background: #10b981; }
.project-alert--info .project-alert__glyph { color: #047857; }

.project-alert--note {
    border-color: rgba(99, 102, 241, 0.25);
    background: rgba(99, 102, 241, 0.06);
}

.project-alert--note .project-alert__badge { background: #6366f1; }
.project-alert--note .project-alert__glyph { color: #4f46e5; }

/* Upcoming task - a light, calm green: it is a heads-up, not an alarm. */
.project-alert--success {
    border-color: rgba(34, 197, 94, 0.30);
    background: rgba(34, 197, 94, 0.09);
}

.project-alert--success .project-alert__badge { background: #22c55e; }
.project-alert--success .project-alert__glyph { color: #16a34a; }
.project-alert--success .project-alert__title { color: #15803d; }


/* No inner scroll box: the feed flows for as long as it is, and the panel it
   sits in does the scrolling. A history should never be clipped to a window. */
.project-activity__stream {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 18px;
}

/* Each entry is a ruled line rather than a floating block: a feed read top to
   bottom wants a rhythm, and a rule is the cheapest one. */
.project-activity__entry {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #d5dadf;
}

.project-activity__entry:last-child {
    border-bottom: none;
}

.project-activity__entry--pinned {
    background: rgba(99, 102, 241, 0.04);
}

.project-activity__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* When, then who - stacked: the time places the line, the name sits in small
   grey underneath it and answers for it. */
.project-activity__stamp {
    color: var(--text-muted);
}

.project-activity__actor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-weight: 500;
}

/* The actor's face, shared by the small event marker and the larger comment
   chip. A photo and the initials both sit inside this same disc. */
.project-activity__avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 700;
    overflow: hidden;
}

.project-activity__avatar--mini {
    width: 18px;
    height: 18px;
    font-size: 9px;
}

.project-activity__avatar--chip {
    width: 30px;
    height: 30px;
    font-size: 11px;
    margin-top: 1px;
}

/* A comment reads like a message: bold name, the words in black, time beneath. */
.project-activity__author {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.project-activity__comment {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.project-activity__monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-pill);
    background: var(--accent-tint);
    color: var(--accent);
    font-size: 9.5px;
    font-weight: 700;
}

/* The pin only shows on the entry under the cursor - a column of pins is a
   column of buttons nobody asked for. */
.project-activity__pin {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-small);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-instant) var(--easing-standard);
}

.project-activity__entry:hover .project-activity__pin,
.project-activity__entry--pinned .project-activity__pin {
    opacity: 1;
}

.project-activity__pin:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.project-activity__entry--pinned .project-activity__pin {
    color: var(--accent);
}

.project-activity__icon {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    margin-top: 1px;
}

/* The actor's face, with the kind of event as a small badge on its corner.

   A column of glyphs said what KIND of thing happened, which the sentence
   beside it already says. A column of faces says who has been near this
   project, which nothing else does. The badge keeps the class every
   type-colour rule below is written against, so none of them had to be
   restated. */
.project-activity__face {
    flex: none;
    position: relative;
    display: inline-flex;
    margin-top: 1px;
}

/* The badge is a SOLID disc of the type's colour with the glyph reversed out
   of it, not the tinted disc the old full-size icon used.

   At 26px a tint at 0.1 alpha is a soft halo behind a coloured glyph and reads
   fine. At 16px, against a white card, several of them had no visible disc at
   all - the event badge's tint is --surface-subtle, which is very nearly the
   card - and the glyph appeared to float on the photograph. `currentColor`
   means each kind's own colour fills its badge without any of the rules below
   having to be written twice.

   The extra `.project-activity__entry` on the selector is not decoration: the
   per-kind rules further down set `background` at the same specificity and sit
   later in the file, so without it they win and the badge goes back to being a
   tint. They still get to set `color`, which is the whole point. */
.project-activity__entry .project-activity__face .project-activity__icon {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
    margin-top: 0;
    background: currentColor;
    border: 2px solid var(--surface-panel);
}

.project-activity__face .project-activity__icon .icon {
    color: #ffffff;
}

.project-activity__entry--event .project-activity__icon {
    background: var(--surface-subtle);
    color: var(--text-muted);
}

/* Type-coloured glyphs so the feed reads as what happened. Titles stay black -
   only the icon carries the colour. */

/* A completed task: a green tick, like the pinned strip's own "dealt with". */
.project-activity__entry--task_done .project-activity__icon {
    background: rgba(34, 197, 94, 0.14);
    color: #16a34a;
}

/* Invoices in blue. */
.project-activity__entry--invoice .project-activity__icon {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

/* Subscriptions in a darker green, matching the pinned renewal cards. */
.project-activity__entry--subscription .project-activity__icon {
    background: rgba(21, 128, 61, 0.12);
    color: #15803d;
}

.project-activity__body {
    flex: 1;
    min-width: 0;
}

.project-activity__text {
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.project-activity__entry--event .project-activity__text {
    color: var(--text-secondary);
    font-size: 12.5px;
}

.project-activity__file {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--surface, #fff);
    cursor: pointer;
    max-width: 100%;
    text-align: left;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.project-activity__file:hover {
    border-color: #c7ccdb;
    box-shadow: 0 2px 8px rgba(15, 18, 28, 0.06);
}

.project-activity__file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--radius-button);
    background: #eef1f8;
    color: #6b7086;
}

.project-activity__file-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.project-activity__file-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}

.project-activity__file-hint {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.project-activity__file--pdf    .project-activity__file-icon { background: #fdecec; color: #d64545; }
.project-activity__file--word   .project-activity__file-icon { background: #e9f0fe; color: #2563eb; }
.project-activity__file--excel  .project-activity__file-icon { background: #e7f6ee; color: #15803d; }
.project-activity__file--slides .project-activity__file-icon { background: #fdeee1; color: #d97706; }
.project-activity__file--image  .project-activity__file-icon { background: #f0ecfe; color: #7c3aed; }
.project-activity__file--text   .project-activity__file-icon { background: #eef1f8; color: #4b5468; }

.project-activity__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-top: 6px;
    font-size: var(--font-size-tiny);
    color: var(--text-muted);
}

/* A comment's time sits close under the words, not floated away. */
.project-activity__entry--comment .project-activity__meta {
    margin-top: 4px;
}

/* Kind colours: a call is green like every call button in the product, an
   email the same soft blue, money the colour money always is here. */
.project-activity__entry--call .project-activity__icon {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.project-activity__entry--email .project-activity__icon,
.project-activity__entry--form .project-activity__icon {
    background: var(--status-info-tint);
    color: var(--status-info);
}

.project-activity__entry--invoice .project-activity__icon,
.project-activity__entry--payment .project-activity__icon {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
}


/* ---- Subscription History tab - a simple lifecycle timeline ------------- */
.sub-history { display: flex; flex-direction: column; }
.sub-history__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--border-subtle);
}
.sub-history__row:last-child { border-bottom: none; }
.sub-history__dot {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--text-muted);
}
.sub-history__dot--created  { background: #6366f1; }
.sub-history__dot--started  { background: #1d4ed8; }
.sub-history__dot--paid     { background: #16a34a; }
.sub-history__dot--failed   { background: #dc2626; }
.sub-history__dot--ended    { background: #94a3b8; }
.sub-history__dot--upcoming { background: #f59e0b; }
.sub-history__body { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.sub-history__title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.sub-history__meta { font-size: 12px; color: var(--text-muted); }
.sub-history__when { font-size: 12px; color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }

/* -----------------------------------------------------------------------------
   All Projects: the pipeline and status tags are barely rounded rather than
   pills. Scoped to this one table on purpose - .invoice-status is Finance's
   status chip as well, and that is not this screen's to reshape.
   -------------------------------------------------------------------------- */
#projectTable .pipeline-chip,
#projectTable .invoice-status {
    border-radius: 3px;
}

/* The project's name is not the loudest thing on its row. Every other cell on
   that line is normal weight, and bold on one of them made the list read as a
   column of headings rather than a table. */
.projects-name {
    font-weight: 400;
    color: var(--text-primary);
}


/* -------------------------------------------------------------------------
   Attachment security tag

   A small status badge on each attachment chip in the activity feed, saying
   what the malware scan found: Verified (clean), Risk (flagged), Unverified
   (scanned but unknown to VirusTotal), Checking… (scan in flight) or Not
   scanned. Kept on the 5px radius system.
   ------------------------------------------------------------------------- */

.project-activity__file-tag {
    flex: none;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--radius-button, 5px);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.55;
}

.project-activity__file-tag--clean      { background: #e7f6ee; color: #15803d; }
.project-activity__file-tag--risk       { background: #fdecec; color: #d64545; }
.project-activity__file-tag--checked    { background: #eaeff7; color: #566180; }
.project-activity__file-tag--pending    { background: #eef1f8; color: #6b7086; }
.project-activity__file-tag--none       { background: #f1f3f8; color: #98a0b3; }


/* The delete on an activity entry: like the pin, only shown on the row under
   the cursor, but it turns danger-red on hover because it removes the row from
   the database and cannot be undone. */
.project-activity__delete {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-small);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-instant) var(--easing-standard),
                background var(--duration-instant) var(--easing-standard),
                color var(--duration-instant) var(--easing-standard);
}

.project-activity__entry:hover .project-activity__delete,
.project-activity__entry:focus-within .project-activity__delete { opacity: 1; }

.project-activity__delete:hover {
    background: var(--status-danger-tint, #fdecec);
    color: var(--status-danger, #d64545);
}