/*
 * Withdrawal Right: the declarations queue's own layout (it was the <style id="aieo-wd-queue-css"> block printed on
 * every tab). The states are the library's badges and the buttons the library's; what is left here is how the cells
 * and the return panel under a row are laid out. Colours are the chrome's tokens.
 */

/* Summary cell: reading only, one fact per line (as a wrapping row the voucher, the carrier and two tags competed for
   width and the Return column squeezed every other one). */
.aieo-wd-sum { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.6; max-width: 260px; }
/* The voucher number and its carrier are one fact, so they stay on one line. */
.aieo-wd-sum__id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aieo-wd-sum__no { border-radius: var(--ra-radius-sm); background: var(--ra-muted); padding: 1px 6px; font-size: var(--ra-text-xs); }

/* A caption naming what the value beside it is: quiet enough not to compete with it. */
.aieo-wd-cap { font-size: 10px; font-weight: 600; color: var(--ra-secondary-foreground); text-transform: uppercase; letter-spacing: .4px; }

/* Sentences need a measure, or the notes stretch and squeeze every other column. */
.aieo-wd-notes { font-size: var(--ra-text-xs); line-height: 1.5; max-width: 320px; }
.aieo-wd-why { margin: 2px 0 0 16px; list-style: disc; }

/* The history: two columns, so the dates line up down the page. */
.aieo-wd-hist { list-style: none; margin: 0 0 6px; padding: 0; font-size: 11px; line-height: 1.6; }
.aieo-wd-hist li { display: flex; gap: 8px; justify-content: space-between; }
.aieo-wd-hist__l { white-space: nowrap; }
.aieo-wd-hist__d { color: var(--ra-secondary-foreground); white-space: nowrap; }
.aieo-wd-hist .is-done .aieo-wd-hist__l { color: var(--ra-foreground); font-weight: 600; }
/* Not yet reached: present, but plainly not done. */
.aieo-wd-hist .is-todo { color: var(--ra-muted-foreground); }
.aieo-wd-hist .is-todo .aieo-wd-hist__l::before { content: '\00b7\00a0'; }

/* Striping per declaration, not per row: one declaration can print two rows (its panel), which nth-child would count. */
.aieo-wd-queue tbody tr.aieo-wd-alt > td { background: var(--ra-muted); }

.aieo-wd-muted { font-size: 11px; color: var(--ra-secondary-foreground); }
.aieo-wd-bad { color: var(--ra-destructive-foreground); }
.aieo-wd-paid { color: var(--ra-success-foreground); font-weight: 600; }
.aieo-wd-note { margin: 0 0 4px; font-size: 11px; line-height: 1.5; color: var(--ra-destructive-foreground); }
.aieo-wd-note--first { margin: 4px 0 0; }

/* Buttons stack rather than wrap raggedly. */
.aieo-wd-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* The refund form, stacked and bounded: an amount, a select and a button cannot share one line in the last column. */
.aieo-wd-refund { display: flex; flex-direction: column; gap: 3px; width: 100%; max-width: 220px; }
.aieo-wd-refund .aieo-wd-amt,
.aieo-wd-refund .aieo-wd-method { width: 100%; max-width: 220px; box-sizing: border-box; margin: 0; }
.aieo-wd-refund .rooster-admin-button { align-self: stretch; }

/* The return panel under a row: one strip, read left to right in the order the work happens (courier, voucher,
   label, check). */
.aieo-wd-panel-row > td { border-top: 2px solid var(--ra-accent); background: var(--ra-muted); padding: 12px 16px; }
.aieo-wd-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 22px; }
.aieo-wd-bar--sub { margin-top: 8px; border-top: 1px solid var(--ra-border); padding-top: 8px; }
.aieo-wd-step { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aieo-wd-step--grow { flex: 1 1 100%; }
.aieo-wd-lab { font-size: 11px; font-weight: 600; color: var(--ra-secondary-foreground); text-transform: uppercase; letter-spacing: .4px; }
.aieo-wd-help { font-size: 11px; line-height: 1.5; color: var(--ra-secondary-foreground); }

/* The refusal, behind its fold at the panel's foot: the destructive path takes a deliberate click. */
.aieo-wd-reject { margin-top: 14px; }

/* Rows stay one line tall unless a panel is open. */
.aieo-wd-queue td { vertical-align: middle; }
.aieo-wd-queue .aieo-wd-act { white-space: nowrap; }