/* ============================================================
   Approve row — styles for approve-row.js (prefix .apr-).
   One "Approve / Send back with a note" control, used on Today.
   Tokens from ivy-refresh.css only; no colors of its own.
   ============================================================ */

.apr { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; max-width: 100%; }
.apr-row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.apr-i { width: 15px; height: 15px; flex: none; }

.apr-btn { color: var(--fg); }
.apr-btn:hover { background: var(--muted-surface); text-decoration: none; }
.apr-btn:focus-visible, .apr-input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.apr-btn[disabled] { opacity: 0.5; pointer-events: none; }
.apr-btn-primary { background: var(--teal); border-color: var(--teal); color: var(--card); }
.apr-btn-primary:hover { background: var(--teal-deep); }
.apr-btn-ghost { background: transparent; border-color: transparent; color: var(--fg-soft); }
.apr-btn-ghost:hover { color: var(--fg) !important; }
.apr-btn-icon { width: var(--ctl-h); padding: 0; }

/* Decided (and the optimistic "saving" moment before the server answers). */
.apr-word { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-base); font-weight: 650; color: var(--ok-ink); background: var(--ok-soft); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.apr.is-back .apr-word { color: var(--fg-soft); background: var(--muted-surface); }
.apr-saving { font-weight: 500; color: var(--muted); margin-left: 2px; }
.apr.is-saving .apr-word { opacity: 0.85; }

/* Send back: the note. */
.apr-note { display: flex; flex-direction: column; gap: 6px; width: 340px; max-width: 100%; text-align: left; }
.apr-label { font-size: var(--fs-sm); font-weight: 650; color: var(--fg); }
.apr-input { width: 100%; min-height: 60px; resize: vertical; padding: 8px 10px; border: 1px solid var(--input-line); border-radius: 8px; background: var(--card); color: var(--fg); font: inherit; font-size: var(--fs-base); line-height: 1.4; box-sizing: border-box; }
.apr-input[aria-invalid="true"] { border-color: var(--danger); }
.apr-hint { margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); }
.apr-note .apr-row { justify-content: flex-start; }

/* Failed call: buttons are back, with what happened. */
.apr-err { display: flex; align-items: flex-start; gap: 6px; margin: 0; max-width: 340px; padding: 7px 10px; border-radius: 8px; background: var(--danger-soft); color: var(--danger-ink); font-size: var(--fs-sm); line-height: 1.4; text-align: left; }
.apr-err .apr-i { margin-top: 1px; color: var(--danger); }

@media (max-width: 720px) {
  .apr { align-items: flex-start; width: 100%; }
  .apr-row { justify-content: flex-start; }
  .apr-note, .apr-err { width: 100%; max-width: 100%; }
    .apr-btn-icon { width: 38px; }
}