/* ================================================================
   Gestão Documental de Contratos — Portal de Suprimentos
   ================================================================ */

/* ── Drawer (painel lateral deslizante) ─────────────────────── */
.cd-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(23,32,44,.45);
  z-index: 900;
}
.cd-drawer-overlay.open { display: block; }

.cd-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 560px;
  max-width: 100vw;
  height: 100vh;
  background: var(--surface);
  box-shadow: -6px 0 32px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  z-index: 901;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.cd-drawer-overlay.open .cd-drawer { transform: translateX(0); }

.cd-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-shrink: 0;
}
.cd-drawer-header h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 3px;
}
.cd-drawer-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.cd-drawer-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  padding: 0 6px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.cd-drawer-close:hover { background: var(--bg); }

/* ── Tabs dentro do drawer ─────────────────────────────────── */
.cd-drawer-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}
.cd-dtab {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.cd-dtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.cd-dtab:hover:not(.active) { color: var(--text); }

/* ── Conteúdo do drawer ─────────────────────────────────────── */
.cd-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}
.cd-drawer-content.cd-tab-chat-active {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

/* ── Card de documento ─────────────────────────────────────── */
.cd-doc-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.cd-doc-card.original {
  border-color: #7c3aed44;
  background: #f5f3ff;
}
.cd-doc-card.original .cd-doc-type-badge {
  background: #ede9fe;
  color: #6d28d9;
}
.cd-doc-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.cd-doc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 2px;
}
.cd-doc-meta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cd-doc-meta span { white-space: nowrap; }
.cd-doc-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.cd-doc-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.5;
}

/* ── Type badge ────────────────────────────────────────────── */
.cd-doc-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
.cd-badge-original    { background: #ede9fe; color: #6d28d9; }
.cd-badge-amendment   { background: #dcfce7; color: #15803d; }
.cd-badge-renewal     { background: #dbeafe; color: #1d4ed8; }
.cd-badge-price       { background: #fef9c3; color: #a16207; }
.cd-badge-clause      { background: #fce7f3; color: #be185d; }
.cd-badge-termination { background: #fee2e2; color: #b91c1c; }
.cd-badge-annex       { background: #f3f4f6; color: #4b5563; }
.cd-badge-other       { background: #f3f4f6; color: #6b7280; }
.cd-badge-archived    { background: #f5f5f5; color: #9e9e9e; }
.cd-badge-replaced    { background: #fff3e0; color: #e65100; }

/* ── Status badge ──────────────────────────────────────────── */
.cd-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
.cd-status-active   { background: #dcfce7; color: #15803d; }
.cd-status-replaced { background: #fff3e0; color: #e65100; }
.cd-status-archived { background: #f3f4f6; color: #9e9e9e; }

/* ── Botões ────────────────────────────────────────────────── */
.cd-btn {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.cd-btn:hover    { background: var(--bg); }
.cd-btn.primary  { background: var(--accent); color: #fff; border-color: var(--accent); }
.cd-btn.primary:hover { opacity: .88; }
.cd-btn.danger   { color: #c0392b; border-color: #f5c2c7; }
.cd-btn.danger:hover { background: #ffebee; }
.cd-btn.icon-only {
  padding: 4px 7px;
  font-size: 13px;
  line-height: 1;
}
.cd-btn.purple   { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; }
.cd-btn.purple:hover { background: #ddd6fe; }
.cd-btn.green    { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.cd-btn.green:hover  { background: #bbf7d0; }

/* ── Seção vazia ──────────────────────────────────────────── */
.cd-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.cd-empty-icon { font-size: 36px; display: block; margin-bottom: 8px; }
.cd-empty h3   { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.cd-empty p    { font-size: 12px; margin: 0 0 16px; }

/* ── Alerta sem original ──────────────────────────────────── */
.cd-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.5;
}
.cd-alert.warning { background: #fff8e1; border: 1px solid #ffe082; color: #5d4037; }
.cd-alert.info    { background: #e3f2fd; border: 1px solid #90caf9; color: #1a237e; }
.cd-alert-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ── Timeline ─────────────────────────────────────────────── */
.cd-timeline {
  position: relative;
  padding-left: 28px;
}
.cd-timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}
.cd-tl-item {
  position: relative;
  margin-bottom: 18px;
}
.cd-tl-dot {
  position: absolute;
  left: -24px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--border);
}
.cd-tl-dot.original    { background: #7c3aed; box-shadow: 0 0 0 2px #c4b5fd; }
.cd-tl-dot.amendment   { background: #16a34a; }
.cd-tl-dot.renewal     { background: #2563eb; }
.cd-tl-dot.price       { background: #d97706; }
.cd-tl-dot.clause      { background: #be185d; }
.cd-tl-dot.termination { background: #dc2626; }
.cd-tl-dot.annex       { background: #6b7280; }
.cd-tl-dot.archived    { background: #9e9e9e; }
.cd-tl-dot.other       { background: #6b7280; }

.cd-tl-content {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.cd-tl-content.original { border-color: #c4b5fd; background: #f5f3ff; }

.cd-tl-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 3px;
}
.cd-tl-date  {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
.cd-tl-desc  { font-size: 12px; color: var(--muted); margin: 0; }
.cd-tl-actions { display: flex; gap: 6px; margin-top: 8px; }

/* ── Modal overlay (upload / arquivar) ────────────────────── */
.cd-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(23,32,44,.65);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cd-modal-overlay.open { display: flex; }

.cd-modal {
  background: var(--surface);
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
}
.cd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}
.cd-modal-header h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.cd-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
}
.cd-modal-close:hover { background: var(--bg); }
.cd-modal-body   { padding: 22px 24px; flex: 1; }
.cd-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
}

/* ── Formulário de upload ─────────────────────────────────── */
.cd-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cd-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cd-form-group.full { grid-column: 1 / -1; }
.cd-form-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.cd-form-group input,
.cd-form-group select,
.cd-form-group textarea {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  box-sizing: border-box;
  width: 100%;
}
.cd-form-group textarea { resize: vertical; }

/* ── Upload drop zone ─────────────────────────────────────── */
.cd-drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  margin-bottom: 14px;
}
.cd-drop-zone:hover, .cd-drop-zone.dragover {
  border-color: var(--accent);
  background: #f0faf7;
}
.cd-drop-zone-icon { font-size: 32px; display: block; margin-bottom: 6px; }
.cd-drop-zone p { font-size: 13px; color: var(--muted); margin: 0; }
.cd-drop-zone strong { color: var(--accent); }
.cd-file-selected {
  background: #f0faf7;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

/* ── Badges na tabela de contratos ───────────────────────── */
.cd-table-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}
.cd-table-badge.has-original { color: #6d28d9; }
.cd-table-badge.no-original  { color: #e65100; }
.cd-table-badge.has-docs     { color: var(--accent); }

/* ── Botões de ação de documento na tabela ───────────────── */
.cd-action-original {
  color: #6d28d9 !important;
  border-color: #c4b5fd !important;
}
.cd-action-original:hover { background: #ede9fe !important; }
.cd-action-original.sem-original {
  color: #e65100 !important;
  border-color: #fed7aa !important;
}
.cd-action-original.sem-original:hover { background: #fff7ed !important; }

.cd-action-docs {
  color: #15803d !important;
  border-color: #bbf7d0 !important;
  position: relative;
}
.cd-action-docs:hover { background: #dcfce7 !important; }

.cd-count-pill {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  min-width: 14px;
  text-align: center;
  line-height: 14px;
}

/* ── Seção header dentro do drawer ───────────────────────── */
.cd-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Loading spinner ──────────────────────────────────────── */
.cd-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 13px;
}
.cd-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cd-spin .7s linear infinite;
}
@keyframes cd-spin { to { transform: rotate(360deg); } }

/* ── Chat IA ──────────────────────────────────────────────── */
.cd-chat-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
  gap: 0;
}
.cd-chat-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface-2, #f4f6fb);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.cd-chat-info span { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.cd-chat-info p { margin: 0; }
.cd-chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.cd-chat-msg {
  display: flex;
  max-width: 86%;
}
.cd-chat-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.cd-chat-msg-ai   { align-self: flex-start; }
.cd-chat-bubble {
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}
.cd-chat-msg-user .cd-chat-bubble {
  background: var(--accent, #2458a6);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.cd-chat-msg-ai .cd-chat-bubble {
  background: var(--surface-2, #f4f6fb);
  color: var(--text);
  border-bottom-left-radius: 3px;
  border: 1px solid var(--border);
}
/* markdown dentro da bolha da IA */
.cd-chat-msg-ai .cd-chat-bubble .cdm-h {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
}
.cd-chat-msg-ai .cd-chat-bubble .cdm-p {
  margin: 0 0 2px;
  line-height: 1.55;
}
.cd-chat-msg-ai .cd-chat-bubble .cdm-ul,
.cd-chat-msg-ai .cd-chat-bubble .cdm-ol {
  margin: 4px 0 6px 0;
  padding-left: 20px;
}
.cd-chat-msg-ai .cd-chat-bubble .cdm-ul li,
.cd-chat-msg-ai .cd-chat-bubble .cdm-ol li {
  margin-bottom: 3px;
  line-height: 1.5;
}
.cd-chat-msg-ai .cd-chat-bubble .cdm-gap { height: 8px; }
.cd-chat-msg-ai .cd-chat-bubble strong { font-weight: 700; }
.cd-chat-msg-ai .cd-chat-bubble em { font-style: italic; }
.cd-chat-msg-ai .cd-chat-bubble code {
  font-family: monospace;
  font-size: 12px;
  background: var(--surface, #eef1f7);
  padding: 1px 5px;
  border-radius: 4px;
}
/* loading dots */
.cd-chat-loading {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
}
.cd-chat-loading span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: cd-dot-bounce .9s infinite ease-in-out both;
}
.cd-chat-loading span:nth-child(2) { animation-delay: .15s; }
.cd-chat-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes cd-dot-bounce {
  0%, 80%, 100% { transform: scale(.7); opacity: .5; }
  40% { transform: scale(1); opacity: 1; }
}
.cd-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  align-items: flex-end;
}
.cd-chat-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2, #f4f6fb);
  outline: none;
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
}
.cd-chat-input:focus { border-color: var(--accent, #2458a6); }
.cd-chat-send {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border: none;
  border-radius: 8px;
  background: var(--accent, #2458a6);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.cd-chat-send:hover:not(:disabled) { background: #1a3f80; }
.cd-chat-send:disabled { opacity: .5; cursor: not-allowed; }

/* ── Responsivo ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .cd-drawer  { width: 100vw; }
  .cd-form-grid { grid-template-columns: 1fr; }
  .cd-drawer-content { padding: 16px; }
}