/* Operator undo card — fixed bottom-right, module-wide.
 * Per EVENT_SYSTEM_BRIEFING.md §4.12. No domain tint: the card is a
 * system affordance, not a domain surface.
 */

.undo-card-slot {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  pointer-events: none;
}

/* :empty hides the slot entirely when there are no events. */
.undo-card-slot:empty {
  display: none;
}

.undo-card,
.single-row-card {
  width: 420px;
  background: #ffffff;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 16px 32px -8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-size: 13px;
  pointer-events: auto;
  /* `font-family` reset — Avo's tailwind base sometimes pushes a
   * heavier font here. Pin to the project default so the card matches
   * the canonical render. */
  font-family: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", system-ui, sans-serif;
  color: #1c1917;
  line-height: 1.4;
}

.undo-card.fading,
.single-row-card.fading {
  opacity: 0.7;
  transition: opacity 0.4s;
}

/* Header (multi-row only) */
.undo-card .undo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #e7e5e4;
  background: #ffffff;
}

.undo-card .undo-header-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #57534e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.undo-card .undo-count {
  font-size: 11px;
  background: #f5f5f4;
  color: #57534e;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 500;
}

.undo-card .undo-header-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-shrink: 0;
}

/* Undo button (header and inline) */
.undo-card .undo-primary,
.single-row-card .undo-primary {
  font-size: 12.5px;
  color: #2563eb;
  cursor: pointer;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid #e7e5e4;
  background: #ffffff;
  white-space: nowrap;
  flex: 0 0 auto;
  font-family: inherit;
  line-height: 1.4;
}

.undo-card .undo-primary:hover,
.single-row-card .undo-primary:hover {
  background: #f5f5f4;
  border-color: #d6d3d1;
}

.undo-card .undo-primary:disabled,
.single-row-card .undo-primary:disabled {
  opacity: 0.5;
  cursor: progress;
}

.undo-card .undo-action {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #2563eb;
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
}

.undo-card .undo-action:hover { text-decoration: underline; }

.undo-card .undo-action.muted {
  color: #57534e;
  font-weight: 400;
}

.undo-card .undo-action.muted:hover {
  color: #1c1917;
  text-decoration: none;
}

/* Rows (multi-row) */
.undo-card .undo-rows {
  max-height: 280px;
  overflow-y: auto;
}

.undo-card .undo-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
}

.undo-card .undo-row + .undo-row {
  border-top: 1px solid #e7e5e4;
}

.undo-card .undo-row.top {
  background: #f5f5f4;
}

.undo-card .undo-row-icon,
.single-row-card .undo-row-icon {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 4px;
  background: #f5f5f4;
  color: #57534e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  margin-top: 1px;
}

.undo-card .undo-row.top .undo-row-icon {
  background: #ffffff;
  border: 1px solid #e7e5e4;
}

.undo-card .undo-row-text {
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
}

.undo-card .undo-row-record,
.single-row-card .single-row-record {
  font-size: 11px;
  color: #57534e;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The label / value / old / arrow markers are emitted by
 * AuditEventsHelper#audit_operation_description. Scope them under
 * the card to avoid colliding with anything globally defined. */
.undo-card .undo-row-description,
.single-row-card .single-row-description {
  font-size: 13px;
  color: #1c1917;
  line-height: 1.45;
  /* Wrap on words, not single chars — long subject lines need to
   * remain readable even when broken across lines. */
  word-break: normal;
  overflow-wrap: anywhere;
}

.undo-card .undo-row-description .label,
.single-row-card .single-row-description .label {
  color: #57534e;
}

.undo-card .undo-row-description .value,
.single-row-card .single-row-description .value {
  font-weight: 500;
}

.undo-card .undo-row-description .old,
.single-row-card .single-row-description .old {
  color: #57534e;
  text-decoration: line-through;
  text-decoration-color: #a8a29e;
}

.undo-card .undo-row-description .arrow,
.single-row-card .single-row-description .arrow {
  color: #a8a29e;
  font-size: 11px;
  margin: 0 2px;
}

.undo-card .undo-row-description .ref,
.single-row-card .single-row-description .ref {
  color: #a8a29e;
  font-size: 11px;
}

.undo-card .undo-row-time {
  font-size: 11px;
  color: #a8a29e;
  flex: 0 0 auto;
  white-space: nowrap;
  margin-top: 1px;
}

/* Footer / timeout bar */
.undo-card .undo-footer,
.single-row-card .undo-footer {
  height: 2px;
  background: #f5f5f4;
  position: relative;
  overflow: hidden;
}

.undo-card .undo-footer-progress,
.single-row-card .undo-footer-progress {
  position: absolute;
  inset: 0;
  background: #d6d3d1;
  transform-origin: left;
  transform: scaleX(1);
  transition: transform 0.1s linear;
}

/* Single-row compact form */
.single-row-card .single-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.single-row-card .single-row-text {
  flex: 1 1 0;
  min-width: 0;
}

/* Inline error banner */
.undo-card .undo-error,
.single-row-card .undo-error {
  font-size: 12px;
  color: #b91c1c;
  background: #fef2f2;
  padding: 8px 14px;
  border-top: 1px solid #fecaca;
  border-bottom: 1px solid #fecaca;
}

/* Pointer-events: this card lives in a .undo-card-slot that has
 * pointer-events:none (so it doesn't trap clicks on the page
 * underneath when there's no card). The card itself must reset
 * pointer-events:auto so its own controls are clickable — including
 * the takeover banner that lives at its top. */
.undo-card,
.single-row-card {
  pointer-events: auto;
}

/* =============================================================
   Takeover banner — solid blue zone at the top of the undo card.
   Per CONCURRENT_EDITING_BRIEFING.md §3.10. V11 visual reference:
   `takeover-final.html`.
   ============================================================= */
.undo-card .takeover {
  padding: 12px 14px;
  background: #2563eb;
  border-bottom: 1px solid #1d4ed8;
  display: flex;
  align-items: center;
  gap: 10px;
}

.undo-card .takeover-text {
  flex: 1;
  min-width: 0;
}

.undo-card .takeover-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2px;
}

.undo-card .takeover-message {
  font-size: 13px;
  color: #ffffff;
  line-height: 1.4;
}

.undo-card .takeover-message .name {
  font-weight: 600;
}

.undo-card .takeover-button {
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid #ffffff;
  background: #ffffff;
  color: #2563eb;
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
  flex-shrink: 0;
}

.undo-card .takeover-button:hover {
  background: #eff6ff;
}