/* Shared cell visuals for the Open- and Closed-invoices grids.
   Scoped under ".workspace-grid" (the ContainerCssClass both grids set) so the styling is
   shared without leaking to unrelated content. Loaded once via index.html. */

.workspace-grid .invoice-link {
    color: #0070B9;
    text-decoration: none;
}

.workspace-grid .invoice-link:hover {
    text-decoration: underline;
}

/* Status cell: colored dot + label + subdued qualifier */
.workspace-grid .status-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.workspace-grid .status-dot {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--secondary-text-color);
}

.workspace-grid .status-dot.tone-success {
    background: var(--success-ocfo-color);
}

.workspace-grid .status-dot.tone-warning {
    background: var(--tangerine-yellow);
}

.workspace-grid .status-dot.tone-light {
    background: var(--grey-4);
}

.workspace-grid .status-dot.tone-danger-light {
    background: var(--dispute-card);
}

.workspace-grid .status-dot.tone-danger {
    background: var(--error);
}

/* Overdue (Open grid): design calls for the orange warning-alt color, not the red "danger" dot
   used elsewhere (e.g. Closed's "Written off"), so it gets its own tone class. */
.workspace-grid .status-dot.tone-overdue {
    background: var(--warning-alt);
}

.workspace-grid .status-dot.tone-neutral {
    background: var(--grid-cards-border-color);
}

/* CFOS-536: Expired - a darker gray than "neutral" so a terminal, inactive case is visually
   distinct from the default/Processing state. Reuses the theme's existing grey scale. */
.workspace-grid .status-dot.tone-dark-gray {
    background: var(--grey-2);
}

.workspace-grid .status-label {
    white-space: nowrap;
}

.workspace-grid .status-qualifier {
    position: relative;
    color: var(--secondary-text-color);
    padding-left: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* fixed-height divider centered on the row instead of a full line-height border */
.workspace-grid .status-qualifier::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: var(--border-color);
}

.workspace-grid .pastdue-overdue {
    color: var(--error);
}

.workspace-grid .amount-cell {
    font-variant-numeric: tabular-nums;
}

/* Right-aligned numeric amount cells (Amount, Amount (GBP)) */
.workspace-grid .amount-right {
    display: block;
    text-align: right;
}

/* M Money column headers follow their right-aligned figures: the title moves to the trailing edge and
   the filter button to the leading one. The header is a flex row of .title-sort-container then the
   filter button, so reordering the button is enough; .resize-handle is absolutely positioned against
   the th's padding box and is unaffected. */

.workspace-grid th[data-property-name="Amount"] .grid-column > .tx-glu-button,
.workspace-grid th[data-property-name="AmountValue"] .grid-column > .tx-glu-button,
.workspace-grid th[data-property-name="AmountInBase"] .grid-column > .tx-glu-button,
.workspace-grid th[data-property-name="Outstanding"] .grid-column > .tx-glu-button,
.workspace-grid th[data-property-name="Overdue"] .grid-column > .tx-glu-button {
    order: -1;
}

/* padding-right (not a th rule) inset the title from the cell's right edge: the theme's
   `div.tx-glu-grid .table-wrapper table thead th { padding-right: 0 }` has higher specificity
   than a th-level override here, but sets no padding on .title-sort-container, so this wins. */
.workspace-grid th[data-property-name="Amount"] .title-sort-container,
.workspace-grid th[data-property-name="AmountValue"] .title-sort-container,
.workspace-grid th[data-property-name="AmountInBase"] .title-sort-container,
.workspace-grid th[data-property-name="Outstanding"] .title-sort-container,
.workspace-grid th[data-property-name="Overdue"] .title-sort-container {
    justify-content: flex-end;
    padding-right: 16px;
}

/* "Latest actioned" grid: automated (BEA) actor styled distinctly from a named human actor. */
.workspace-grid .actioned-by-agent {
    color: #000;
}

/* BEA wordmark: underline only the "B", matching the BEA logo treatment. */
.workspace-grid .actioned-by-agent-initial {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* "Latest actioned" grid: Action taken cell + its optional compliance indicator icon. */
.workspace-grid .action-taken-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.workspace-grid .compliance-flag-icon {
    display: inline-flex;
    align-items: center;
    color: var(--tangerine-yellow);
}

/* Customer cell: alert icon + customer name */
.workspace-grid .customer-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.workspace-grid .customer-cell .customer-alert-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.workspace-grid .customer-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reminder stage pill */
.workspace-grid .reminder-stage-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    background: var(--surface-subtle);
    color: var(--black-color);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.workspace-grid .ellipsis-cell {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Center the action button within its column. */
.workspace-grid .actions-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}