/* row-detail.css — Popup de detalhe de linha (.rd, .rd-backdrop) usado
   nas tabelas Dattago.
   Extraído de components.css na Fase C da modularização. */

/* ════════════════════════════════════
   PAINEL DE DETALHE DA LINHA (rd)
════════════════════════════════════ */
.rd-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 10002;
  opacity: 0;
  transition: opacity .18s ease;
}
.rd-backdrop--visible { opacity: 1; }

.rd {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -47%) scale(.97);
  z-index: 10003;
  background: #ffffff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
  width: min(640px, calc(100vw - 32px));
  max-height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity .18s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.rd--visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.rd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-dim, #f1f5f9);
  flex-shrink: 0;
}
.rd-title {
  font-size: .9rem; font-weight: 700;
  color: var(--text, #0f172a); letter-spacing: -.01em;
}
.rd-close {
  background: none; border: none; cursor: pointer;
  padding: 5px; color: var(--text-muted, #64748b);
  font-size: 1rem; line-height: 1; border-radius: 6px;
  transition: background .14s, color .14s;
}
.rd-close:hover { background: var(--border-dim, #f1f5f9); color: var(--text, #0f172a); }

.rd-body {
  overflow-y: auto;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--border, #e2e8f0) transparent;
}
.rd-body::-webkit-scrollbar       { width: 5px; }
.rd-body::-webkit-scrollbar-track { background: transparent; }
.rd-body::-webkit-scrollbar-thumb { background: var(--border, #e2e8f0); border-radius: 99px; }

.rd-field {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.rd-label {
  font-size: .63rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted, #64748b);
}
.rd-value {
  font-size: .82rem; color: var(--text, #0f172a);
  word-break: break-word; white-space: pre-wrap;
  line-height: 1.5;
}
.rd-value--empty { color: var(--text-muted, #94a3b8); font-style: italic; }

/* Campos longos (Histórico, Motivo) ocupam as 2 colunas */
.rd-field:has(.rd-value) { grid-column: span 1; }