/* Caixinha de Sugestoes (Fase 7) - tela interna. Reaproveita .cu-cards/.cp-tabs/.tk-* e o modal .cm-modal. */

.cxs-actions button { white-space: nowrap; }
.cxs-table td { vertical-align: top; }
.cxs-table .cxs-msg { max-width: 360px; overflow-wrap: anywhere; }
.cxs-sub { display: block; color: var(--color-muted); font-size: 11px; margin-top: 2px; }
.cxs-actions { white-space: nowrap; }
.cxs-table tr.cxs-urgent { box-shadow: inset 3px 0 0 var(--color-danger, #c0392b); background: #fff8f7; }

.cxs-detail-card { width: min(780px, 96vw); max-height: 92vh; overflow-y: auto; }
.cxs-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.cxs-message-full { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 12px 14px; background: var(--color-surface-muted, #f4f6f8); border-radius: 10px; font-size: 15px; line-height: 1.5; }
.cxs-hint { margin-top: 10px; padding: 10px 12px; border: 1px dashed #f0b429; background: #fff9e6; border-radius: 10px; font-size: 13px; }
.cxs-hint small { display: block; color: var(--color-muted); margin: 2px 0 6px; }
.cxs-triage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 10px; }
.cxs-triage-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-muted); }
.cxs-triage-grid select { font-size: 14px; }
.cxs-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.cxs-link-row > span { font-weight: 600; min-width: 70px; }

.cxs-box-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.cxs-box-config { padding: 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.cxs-box-config h4 { margin: 0 0 10px; }
.cxs-box-config input[readonly] { width: 100%; }
.cxs-qr { display: block; margin: 14px auto 0; max-width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; }
.cxs-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; }

.cxs-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 8px; }
.cxs-report-grid h4 { margin: 0 0 8px; }
.cxs-bars { display: grid; gap: 6px; }
.cxs-bar-row { display: grid; grid-template-columns: minmax(90px, 140px) 1fr auto auto; align-items: center; gap: 8px; font-size: 13px; }
.cxs-bar-label { overflow-wrap: anywhere; }
.cxs-bar { height: 10px; background: var(--color-surface-muted, #e8edf1); border-radius: 999px; overflow: hidden; }
.cxs-bar i { display: block; height: 100%; background: var(--color-accent, #0e7c86); border-radius: 999px; }
.cxs-bar-row small { color: var(--color-muted); min-width: 42px; text-align: right; }

.dash-suggestions { margin-top: 12px; }
.dash-suggestions-title { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }

/* tabela vira cartoes no celular */
@media (max-width: 900px) {
  .cxs-table thead { display: none; }
  .cxs-table, .cxs-table tbody, .cxs-table tr, .cxs-table td { display: block; width: 100%; }
  .cxs-table tr { border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 10px; padding: 8px 12px; background: var(--color-surface); }
  .cxs-table td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; text-align: right; }
  .cxs-table td::before { content: attr(data-label); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); text-align: left; flex: none; padding-top: 2px; }
  .cxs-table td.cxs-msg { max-width: none; }
  .cxs-table td.cxs-actions { justify-content: flex-end; }
  .cxs-table td.tk-empty { display: block; text-align: center; }
  .cxs-table td.tk-empty::before { content: none; }
  .cxs-detail-card { width: 100vw; max-height: 100vh; border-radius: 0; }
  .cxs-bar-row { grid-template-columns: minmax(80px, 110px) 1fr auto auto; }
}
.cxs-hint-inline { color: #b54708; font-weight: 600; }