/* ============================================================================
   ETA status column — relation pills and the two-row status cell
   ----------------------------------------------------------------------------
   Shared by the E-Invoices and E-Receipts grids so a credited invoice and a
   returned sale are drawn by the same hand.

   Colour comes from --mud-palette-* / --egk-* tokens so Theme Studio and dark
   mode work without a second stylesheet. Layout uses logical properties so
   Arabic mirrors correctly.
   ========================================================================== */

/* ----------------------------------------------------------- the cell --- */

/* Row one is the lifecycle (badge, transition, window); row two is what the
   document is related to. Splitting them stops a long relation from wrapping
   the badge onto a second line and lets the eye find the badge in the same
   place on every row. */
.eta-status-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.eta-status-stack--start {
    align-items: flex-start;
}

.eta-rel-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: inherit;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.eta-rel-row:empty {
    display: none;
}

/* ----------------------------------------------------------- the pill --- */

.eta-rel {
    --rel-color: var(--egk-color-muted, var(--mud-palette-text-secondary));
    --rel-rgb: var(--mud-palette-text-secondary-rgb, 100, 116, 139);
    --rel-tint: 0.08;
    --rel-line: 0.22;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: 24px;
    padding-inline: 8px 9px;
    border-radius: var(--egk-radius-full, 9999px);
    border: 1px solid rgba(var(--rel-rgb), var(--rel-line));
    background: rgba(var(--rel-rgb), var(--rel-tint));
    color: var(--rel-color);
    font-family: var(--egk-font-sans, inherit);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.005em;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.eta-rel__icon.mud-icon-root {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    font-size: 14px;
    opacity: 0.9;
}

.eta-rel__label {
    flex: 0 0 auto;
    opacity: 0.92;
}

/* A hairline dot rather than a typed "·": it never wraps and never inherits a
   font that draws the dot too heavy. */
.eta-rel__sep {
    flex: 0 0 auto;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
}

.eta-rel__num {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--egk-font-mono, ui-monospace, monospace);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--egk-color-text, var(--mud-palette-text-primary));
    font-variant-numeric: tabular-nums;
}

.eta-rel__count {
    flex: 0 0 auto;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: var(--egk-radius-full, 9999px);
    background: rgba(var(--rel-rgb), 0.18);
    color: var(--rel-color);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* The "go" arrow is the click affordance. It is there from the start but faint,
   and comes forward on hover, so a resting row is not a field of arrows. */
.eta-rel__go.mud-icon-root {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    font-size: 12px;
    margin-inline-start: -1px;
    opacity: 0.45;
    transition: opacity 140ms ease, transform 140ms ease;
}

[dir="rtl"] .eta-rel__go.mud-icon-root {
    transform: scaleX(-1);
}

.eta-rel--link {
    cursor: pointer;
}

.eta-rel--link:hover,
.eta-rel--link:focus-visible {
    --rel-tint: 0.14;
    --rel-line: 0.42;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 10px -6px rgba(var(--rel-rgb), 0.45);
    transform: translateY(-0.5px);
    outline: none;
}

.eta-rel--link:hover .eta-rel__go.mud-icon-root,
.eta-rel--link:focus-visible .eta-rel__go.mud-icon-root {
    opacity: 1;
    transform: translate(1px, -1px);
}

[dir="rtl"] .eta-rel--link:hover .eta-rel__go.mud-icon-root,
[dir="rtl"] .eta-rel--link:focus-visible .eta-rel__go.mud-icon-root {
    transform: translate(-1px, -1px) scaleX(-1);
}

.eta-rel--link:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--egk-color-primary-rgb, 25, 118, 210), 0.35);
}

/* ----------------------------------------------------------- the tones --- */

.eta-rel--neutral {
    --rel-color: var(--mud-palette-text-secondary);
    --rel-rgb: var(--mud-palette-text-secondary-rgb, 100, 116, 139);
}

.eta-rel--warning {
    --rel-color: var(--egk-color-warning, var(--mud-palette-warning));
    --rel-rgb: var(--mud-palette-warning-rgb, 237, 108, 2);
    --rel-tint: 0.1;
    --rel-line: 0.32;
}

.eta-rel--info {
    --rel-color: var(--egk-color-primary, var(--mud-palette-primary));
    --rel-rgb: var(--egk-color-primary-rgb, 25, 118, 210);
    --rel-tint: 0.07;
    --rel-line: 0.28;
}

.eta-rel--draft {
    --rel-color: var(--mud-palette-text-secondary);
    --rel-rgb: var(--mud-palette-text-secondary-rgb, 100, 116, 139);
    --rel-tint: 0;
    --rel-line: 0.4;
    border-style: dashed;
}

.eta-rel--draft .eta-rel__num {
    color: var(--mud-palette-text-secondary);
}

.eta-rel--muted {
    --rel-color: var(--mud-palette-text-disabled, rgba(0, 0, 0, 0.38));
    --rel-rgb: var(--mud-palette-text-secondary-rgb, 100, 116, 139);
    --rel-tint: 0.05;
    --rel-line: 0.16;
}

.eta-rel--muted .eta-rel__num {
    color: var(--mud-palette-text-secondary);
}

/* -------------------------------------------------------- the progress --- */

/* How far the relation goes — 40% credited — as a hairline along the bottom
   edge. Room is made for it by pushing the text up one pixel, not by growing
   the pill, so tracked and untracked pills sit on the same line. */
.eta-rel--tracked {
    padding-block-end: 2px;
}

.eta-rel__track {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    background: rgba(var(--rel-rgb), 0.16);
}

.eta-rel__fill {
    display: block;
    height: 100%;
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
    background: linear-gradient(90deg, rgba(var(--rel-rgb), 0.7), rgba(var(--rel-rgb), 1));
    transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------- the menu --- */

/* The list that opens when several documents sit on the other side. */
.eta-rel-menu .mud-list-item {
    padding-block: 6px;
}

.eta-rel-menu__num {
    font-family: var(--egk-font-mono, ui-monospace, monospace);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.eta-rel-menu__meta {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

/* -------------------------------------------------------------- dark mode --- */

.mud-theme-dark .eta-rel {
    --rel-tint: 0.14;
    --rel-line: 0.3;
}

.mud-theme-dark .eta-rel--draft {
    --rel-tint: 0;
}