/* ============================================================================
   Tax advisory case detail view.

   Home for the panels that replace stock editor stacks on TaxAdvisoryCase_DetailView.
   Tokens mirror activity-feed.css so the two panels sit on the same detail view without
   arguing about brand shades; --dxds-primary-* comes from brand-accent.css, the raw hex
   values are the fallback for when the DX theme has not injected the ramp.
   ========================================================================== */

.bc-card {
    --bc-brand: var(--dxds-primary-90, #4147d5);
    --bc-brand-soft: var(--dxds-primary-30, #dcdefa);
    --bc-brand-softer: var(--dxds-primary-10, #f0f1fd);
    --bc-ink: #101a33;
    --bc-muted: #5b6472;
    --bc-line: #dde2ea;
    --bc-track: #e3e6f3;

    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 2px 0;
}

/* ── Mode ───────────────────────────────────────────────────────────────────
   Whether the work is billable governs everything below it, so it leads. It is a
   statement, not a control — the mode is changed through ChangeBillingModeAction,
   which also resets the estimate. */
.bc-head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* The mode switch, kept as a link so it reads as an aside to the pill rather than as the card's
   primary control — the estimation buttons below it are what the user is usually here for. */
.bc-card .bc-action.dxbl-btn {
    padding: 0 2px;
    font-size: 11.5px;
    font-weight: 600;
}

.bc-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.bc-card .bc-action-btn.dxbl-btn {
    padding: 3px 12px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
}

.bc-mode {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bc-brand-soft);
    color: var(--bc-brand);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2px;
}

.bc-included {
    margin: 0;
    color: var(--bc-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* Section heads. Small, uppercase and quiet — they name the figure below without
   competing with it for the eye. */
.bc-label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 700;
    color: var(--bc-muted);
}

/* ── Amount ─────────────────────────────────────────────────────────────────
   The one number on the card, so it is set at display size. Tabular figures keep the
   decimal aligned with the invoice total in the footer. */
.bc-amount-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bc-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.bc-amount-value {
    font-size: 26px;
    font-weight: 650;
    line-height: 1.1;
    color: var(--bc-ink);
    font-variant-numeric: tabular-nums;
}

.bc-currency {
    font-size: 12px;
    font-weight: 600;
    color: var(--bc-muted);
}

.bc-amount-edit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bc-amount-edit .bc-amount-input {
    max-width: 170px;
    font-variant-numeric: tabular-nums;
}

/* ── Estimation track ───────────────────────────────────────────────────────
   Five states as a dotted rail rather than five words in a combo box: position carries
   the progress, the label underneath confirms it. Each step owns the segment of rail to
   its left, so a filled segment always means "this step has been reached". */
.bc-estimation {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bc-track {
    display: flex;
    align-items: flex-start;
}

/* The middle column is exactly the dot's width. Any wider and the connectors stop short of the
   dot on both sides, leaving a rail that looks perforated. */
.bc-step {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 9px 1fr;
    grid-template-rows: 12px auto;
    align-items: center;
    justify-items: center;
    row-gap: 6px;
    min-width: 0;
}

.bc-line {
    height: 2px;
    width: 100%;
    background: var(--bc-track);
}

.bc-step:first-child .bc-line-l,
.bc-step:last-child .bc-line-r {
    visibility: hidden;
}

.bc-dot {
    grid-column: 2;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bc-track);
    transition: background .2s ease, box-shadow .2s ease;
}

/* A segment between two dots is made of two half-connectors owned by different steps, so it is
   only whole when both agree: this step has been reached, and so has the one after it. Filling
   just the left half — which is all "is-reached" can say on its own — leaves every segment half
   grey. */
.bc-step.is-reached .bc-dot,
.bc-step.is-reached .bc-line-l,
.bc-step.next-reached .bc-line-r {
    background: var(--bc-brand);
}

/* Where it stands now: a halo rather than a bigger dot, so the rail's rhythm holds. */
.bc-step.is-current .bc-dot {
    box-shadow: 0 0 0 4px var(--bc-brand-soft);
}

/* Wraps rather than truncates: these are the same words the transition buttons use, and an
   ellipsis would break the match the reader needs to make between the two. The dots stay in line
   because they sit in a fixed-height grid row above the labels. */
.bc-step-label {
    grid-column: 1 / -1;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    color: var(--bc-muted);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.bc-step.is-current .bc-step-label {
    color: var(--bc-ink);
    font-weight: 600;
}

.bc-note {
    font-size: 11.5px;
    color: var(--bc-muted);
    font-variant-numeric: tabular-nums;
}

/* Rejection is the one estimate outcome that is not progress, so it is the one line on
   the card that carries a semantic colour. */
.bc-rejected {
    font-size: 11.5px;
    font-weight: 600;
    color: #b02a37;
}

/* ── Invoice ────────────────────────────────────────────────────────────────
   Below a rule, because it is the consequence of everything above rather than another
   field of it. */
.bc-invoice {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 10px;
    border-top: 1px solid var(--bc-line);
}

.bc-invoice-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* A button, because it opens the invoice, styled as the link it reads as — the document is the
   one thing on this card that exists somewhere else. */
.bc-invoice-no {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--bc-brand);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--bc-brand) 35%, transparent);
}

.bc-invoice-no:hover,
.bc-invoice-no:focus-visible {
    text-decoration-color: currentColor;
}

/* Tinted from the invoice's own status colour, the same way status pills read elsewhere:
   the hue is the fill, the text takes the hue at full strength. */
.bc-invoice-status {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--bc-status, var(--bc-muted));
    background: color-mix(in srgb, var(--bc-status, #6c757d) 14%, #fff);
}

.bc-invoice-empty {
    font-size: 12.5px;
    color: var(--bc-muted);
}

/* ============================================================================
   Status history slab.

   The same rows the nested list view held, read the only way anyone reads them: newest
   first, straight down. Each row leads with where the process landed, because that is
   what someone scanning the column is looking for; where it came from is the footnote.
   ========================================================================== */

.shs {
    --shs-ink: #101a33;
    --shs-muted: #5b6472;
    --shs-line: #eceef4;

    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.shs-row {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: start;
    gap: 8px;
    padding: 7px 2px;
    border-bottom: 1px solid var(--shs-line);
}

.shs-row:last-child {
    border-bottom: none;
}

/* The status's own colour, as a mark rather than a fill — a row of tinted bands would
   read as a legend for something. */
.shs-dot {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    justify-self: center;
    border-radius: 50%;
    background: var(--shs-color, #9aa2b1);
}

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

.shs-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.shs-to {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--shs-ink);
}

.shs-from {
    font-size: 11px;
    color: var(--shs-muted);
}

.shs-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 11px;
    color: var(--shs-muted);
}

.shs-date {
    font-variant-numeric: tabular-nums;
}

.shs-user {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shs-notes {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--shs-ink);
}

.shs-empty {
    padding: 8px 2px;
    font-size: 12.5px;
    color: var(--shs-muted);
}

/* ============================================================================
   Due-date countdown pill.

   Semantic colour, deliberately outside the brand ramp: this is the one thing in the
   Warunki card that can demand action today.
   ========================================================================== */

.ddc-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.ddc-pill.is-overdue {
    color: #a4232f;
    background: #fbe5e7;
}

.ddc-pill.is-soon {
    color: #8a5200;
    background: #fdf0d9;
}

/* Not yet worth a colour — brand mist, the same "still ahead" fill the status rail uses
   for steps it has not reached. */
.ddc-pill.is-later {
    color: #4a5164;
    background: #eceefb;
}

/* ============================================================================
   Icon lookup — a reference shown as its own icon plus its name.

   Not case-specific: any view using IconLookupPropertyEditor renders through these, which is
   why they carry no bc- prefix.
   ========================================================================== */

.icon-lookup {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    /* Without a ceiling the flex box sizes to its content and a long name is cut mid-letter by the
       grid cell instead of ellipsised by the rule on .icon-lookup-text below. */
    max-width: 100%;
    /* Matches the height a lookup editor occupies, so a read-only row does not sit higher than
       the editable ones beside it. */
    min-height: 24px;
}

.icon-lookup-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.icon-lookup-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-lookup-link {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(65, 71, 213, .35);
}

.icon-lookup-link:hover {
    text-decoration-color: currentColor;
}

/* ============================================================================
   Composer, pinned to the top of the feed.

   Opt-in per view: the class comes from CustomCSSClassName on the Activities layout item,
   so the feed's own markup and every other process's copy of it are untouched. It keeps the
   composer where the markup already puts it — directly under the filter bar — and makes it
   stay there while the entries scroll, because on a case the feed runs to dozens of entries
   and a composer that scrolls away asks the reader to travel back to write.

   The `>` matters: the reply composer nested in the axis must keep its place beside the entry
   it answers rather than being pinned anywhere.
   ========================================================================== */

.case-feed-composer-top .afeed > .acomp-launch,
.case-feed-composer-top .afeed > .acomposer:not(.inline) {
    position: sticky;
    top: 0;
    z-index: 5;
    /* Full width and opaque for the same reason: entries scroll underneath it, and a band only
       as wide as the button would let them run past its edge — the launch button is
       align-self: flex-start in the feed's own layout, so the stretch has to be spelled out. */
    align-self: stretch;
    background: #fff;
    padding: 4px 0 8px;
}

/* The stretch above is what brings the rule back: the launch button carries a box-shadow sized to
   itself, and once its box spans the feed that shadow paints as a hairline across the full width —
   a toolbar rule under the primary action, which is what .acomp-launch's own align-self: flex-start
   exists to avoid. The band needs the width, so the shadow goes instead. */
.case-feed-composer-top .afeed > .acomp-launch { box-shadow: none; }

/* ============================================================================
   Client field on a tax advisory case.

   The name never links here, so the only thing these rules add to .icon-lookup is the
   external-client marker and the stacking that puts it on its own line. Under the name
   rather than beside it: a company name already competes for the column's width, and an
   inline marker is the first thing an ellipsis eats.
   ========================================================================== */

.tac-customer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
}

/* The name row keeps .icon-lookup's own min-height so a client row lines up with the
   advisor and accountant rows beside it; the marker adds to the row instead of shifting it. */
.tac-customer > .icon-lookup {
    max-width: 100%;
}

.tac-customer-external {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde3a7;
}