* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; color: #1f2937; background: #f8fafc; }

.topbar { background: #1f2937; color: #fff; padding: 10px 16px; display: flex; align-items: center; gap: 16px; }
.topbar .brand { font-weight: 600; color: #fff; text-decoration: none; border: 0; padding: 0; background: transparent; }
.topbar .brand:hover { opacity: 0.85; }
.topbar .usermenu { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.topbar form.inline { display: inline; }
.topbar a, .topbar button { color: #fff; background: transparent; border: 1px solid #4b5563; padding: 4px 10px; border-radius: 4px; cursor: pointer; text-decoration: none; }

.mode-indicator select { font-weight: 700; padding: 4px 8px; border-radius: 4px; border: 0; }
.mode-producao select { background: #10b981; color: #fff; }
.mode-teste select { background: #f59e0b; color: #fff; }

.content { padding: 16px; }
.alert.error { background: #fef2f2; color: #991b1b; padding: 10px; border-radius: 4px; margin-bottom: 12px; }

.login-box { max-width: 360px; margin: 80px auto; background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.login-box label { display: block; margin-bottom: 12px; }
.login-box input { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; }
.login-box button { width: 100%; padding: 10px; background: #1f2937; color: #fff; border: 0; border-radius: 4px; cursor: pointer; }

.filtros { background: #fff; padding: 12px; border-radius: 6px; display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; }
.filtros label { font-size: 12px; color: #6b7280; display: flex; flex-direction: column; gap: 4px; }
.filtros select, .filtros input { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.kpi { background: #fff; padding: 12px; border-radius: 6px; }
.kpi b { font-size: 24px; display: block; }
.kpi .label { font-size: 12px; color: #6b7280; text-transform: uppercase; }

.charts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.chart-card { background: #fff; padding: 12px; border-radius: 6px; height: 250px; position: relative; }
.chart-card h3 { font-size: 13px; margin: 0 0 8px 0; color: #6b7280; }

.tabela-wrap { background: #fff; border-radius: 6px; overflow: hidden; }
.tabela-wrap .toolbar { display: flex; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; gap: 8px; align-items: center; }
.tabela-wrap .toolbar .exports { margin-left: auto; display: flex; gap: 6px; }
.tabela-wrap .toolbar a { padding: 4px 10px; background: #f3f4f6; border-radius: 4px; text-decoration: none; color: #1f2937; font-size: 12px; }
.tabela-wrap .toolbar a[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

table.solicitacoes, table.contratacoes { width: 100%; border-collapse: collapse; font-size: 13px; }
table.solicitacoes th, table.solicitacoes td,
table.contratacoes th, table.contratacoes td { padding: 8px 12px; border-bottom: 1px solid #f3f4f6; text-align: left; }
table.solicitacoes th, table.contratacoes th { background: #f9fafb; font-size: 12px; text-transform: uppercase; color: #6b7280; }
/* Não quebrar colunas com data/valor monoespaçados */
table.contratacoes td.mono,
table.contratacoes td.align-right { white-space: nowrap; }

.status-novo { background: #fef3c7; padding: 2px 8px; border-radius: 4px; }
.status-respondido { background: #d1fae5; padding: 2px 8px; border-radius: 4px; }
.status-ignorado { background: #e5e7eb; padding: 2px 8px; border-radius: 4px; }
.status-falhou { background: #fee2e2; padding: 2px 8px; border-radius: 4px; }

.bulk-bar { display: none; background: #1f2937; color: #fff; padding: 8px 12px; border-radius: 6px; margin-bottom: 8px; align-items: center; gap: 12px; }
.bulk-bar.show { display: flex; }

.toast { position: fixed; bottom: 16px; right: 16px; background: #1f2937; color: #fff; padding: 10px 14px; border-radius: 4px; opacity: 0; transition: opacity .3s; }
.toast.show { opacity: 1; }

.row-clickable { cursor: pointer; }
.row-clickable:hover { background: #f9fafb; }

.modal-container:empty { display: none; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 24px; }
.modal-content { background: #fff; border-radius: 8px; max-width: 900px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.modal-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; background: #fff; }
.modal-header-text { flex: 1; }
.modal-header h2 { font-size: 18px; margin: 0; }
.modal-subject { margin: 4px 0 0; font-size: 14px; color: #374151; font-weight: 500; word-break: break-word; }
.modal-close { background: transparent; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: #6b7280; padding: 0 4px; }
.modal-close:hover { color: #1f2937; }
.modal-meta, .modal-history { padding: 16px 20px; border-bottom: 1px solid #f3f4f6; }
.modal-meta h3, .modal-history h3 { font-size: 13px; text-transform: uppercase; color: #6b7280; margin: 0 0 8px; letter-spacing: 0.5px; }
.modal-meta dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.modal-meta dt { color: #6b7280; }
.modal-meta dd { margin: 0; }
.modal-history ul { margin: 0; padding-left: 18px; font-size: 13px; }
.modal-history .muted { color: #9ca3af; font-style: italic; margin: 0; }

/* ── Formulário de resposta de orçamento ───────────────────────────────── */
.responder-form { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.responder-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #374151; }
.responder-form input[type="text"] { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 14px; }
.responder-form input[readonly] { background: #f3f4f6; color: #6b7280; cursor: default; }
.prefix-input { display: flex; align-items: stretch; border: 1px solid #d1d5db; border-radius: 4px; overflow: hidden; }
.prefix-input .prefix { background: #f3f4f6; padding: 8px 10px; font-size: 14px; color: #6b7280; border-right: 1px solid #d1d5db; display: flex; align-items: center; }
.prefix-input input[type="text"] { border: 0; border-radius: 0; flex: 1; }
.form-error { background: #fef2f2; color: #991b1b; padding: 8px 12px; border-radius: 4px; font-size: 13px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.btn-cancel { padding: 8px 16px; background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer; font-size: 14px; }
.btn-cancel:hover { background: #e5e7eb; }
.btn-primary { padding: 8px 16px; background: #1f2937; color: #fff; border: 0; border-radius: 4px; cursor: pointer; font-size: 14px; }
.btn-primary:hover { background: #374151; }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

/* === Contratações / status contratada / prazos === */

/* Status contratada — verde igual respondido, mas com texto distintivo */
.status-contratada {
  background: #4caf50;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
}
.status-dropdown option[value="contratada"][disabled] {
  color: #999;
  font-style: italic;
}

/* Prazo chips */
.prazo-chip {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-family: monospace;
}
.prazo-chip-ok       { background: #4caf50; color: white; }
.prazo-chip-proximo  { background: #ff9800; color: black; }
.prazo-chip-vencido  { background: #f44336; color: white; }
.prazo-chip-na       { color: #999; }

/* Linhas com prazo problemático */
tr.row-prazo-vencido { background: rgba(244, 67, 54, 0.06); }
tr.row-prazo-proximo { background: rgba(255, 193, 7, 0.05); }

/* Vinculação box (modais) */
.vinculacao-box {
  margin: 12px 16px;
  padding: 8px 12px;
  border-radius: 3px;
}
.vinculacao-box-ok {
  background: rgba(76, 175, 80, 0.10);
  border-left: 3px solid #4caf50;
}
.vinculacao-box-orfa {
  background: rgba(255, 165, 0, 0.10);
  border-left: 3px solid #ff9800;
}

/* Top bar pill — vencidos globais */
.topbar-pill-vencidos {
  background: #f44336;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 12px;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}

/* Coluna Sol. na tabela de contratações */
.col-sol-ok   { color: #4caf50; }
.col-sol-orfa { color: #ff9800; }

/* Linhas órfãs (contratações) */
tr.row-orfa { background: rgba(255, 165, 0, 0.08); }

/* Alerta de prazo vencido no modal de solicitação */
.alerta-vencido {
  margin: 0 16px 12px;
  padding: 8px 12px;
  background: rgba(244, 67, 54, 0.12);
  border-left: 3px solid #f44336;
  border-radius: 3px;
}

/* Topnav */
.topnav { display: inline-flex; gap: 16px; margin-left: 16px; }
.topnav a { text-decoration: none; padding: 4px 8px; }
.topnav a.active { font-weight: 600; border-bottom: 2px solid currentColor; }

/* Ícone link inline (contratação a partir da solicitação) */
.icon-link { margin-left: 4px; text-decoration: none; }

/* Misc */
.mono { font-family: monospace; }
.align-right { text-align: right; }
.align-center { text-align: center; }
.muted { color: #999; font-weight: normal; font-size: 11px; }