/* ============================================================
   NÚCLEO CCA — Estilos
   Design inspirado no Trello: limpo, arredondado, premium.
   Tudo é controlado por "variáveis de cor" (--nome), então
   trocar entre tema claro e escuro só muda essas variáveis.
   ============================================================ */

/* ---------- FONTE ---------- */
/* Inter é bem próxima da fonte do Trello. Se estiver offline,
   o navegador usa a fonte do sistema automaticamente.          */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- TEMA CLARO (padrão) ---------- */
:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --app-bg:        #f7f8f9;
  --sidebar-bg:    #ffffff;
  --topbar-bg:     #ffffff;
  --column-bg:     #f1f2f4;
  --card-bg:       #ffffff;
  --card-hover:    #f7f8f9;
  --modal-bg:      #ffffff;
  --input-bg:      #ffffff;
  --hover-soft:    #e9ebee;

  --text:          #172b4d;
  --text-soft:     #44546f;
  --text-muted:    #626f86;

  --border:        #dfe1e6;
  --border-soft:   #ebecf0;

  --accent:        #0c66e4;
  --accent-hover:  #0055cc;
  --accent-soft:   #e9f2ff;

  --shadow-card:   0 1px 1px rgba(9,30,66,.12), 0 0 1px rgba(9,30,66,.08);
  --shadow-modal:  0 8px 28px rgba(9,30,66,.28);
  --shadow-menu:   0 4px 16px rgba(9,30,66,.20);
}

/* ---------- TEMA ESCURO ---------- */
:root[data-theme='dark'] {
  --app-bg:        #1d2125;
  --sidebar-bg:    #161a1d;
  --topbar-bg:     #161a1d;
  --column-bg:     #101204;
  --column-bg:     #22272b;
  --card-bg:       #22272b;
  --card-hover:    #282f36;
  --modal-bg:      #22272b;
  --input-bg:      #1d2125;
  --hover-soft:    #2c333a;

  --text:          #c7d1db;
  --text-soft:     #b6c2cf;
  --text-muted:    #9fadbc;

  --border:        #2c333a;
  --border-soft:   #2c333a;

  --accent:        #579dff;
  --accent-hover:  #85b8ff;
  --accent-soft:   #1c2b41;

  --shadow-card:   0 1px 1px rgba(0,0,0,.35);
  --shadow-modal:  0 8px 28px rgba(0,0,0,.55);
  --shadow-menu:   0 4px 16px rgba(0,0,0,.45);
}

/* ---------- BASE ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
button { font-family: inherit; cursor: pointer; }
::-webkit-scrollbar { height: 12px; width: 12px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }

/* ============================================================
   LAYOUT GERAL: sidebar + área principal
   ============================================================ */
.app { display: flex; height: 100vh; overflow: hidden; }

/* ---------- MENU LATERAL ---------- */
.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 4px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 14px;
}
.brand-logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, #0c66e4, #0747a6);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 15px;
  flex-shrink: 0;
}
.brand-name { font-weight: 700; font-size: 15px; line-height: 1.1; }
.brand-sub  { font-size: 11px; color: var(--text-muted); }

.side-label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted); text-transform: uppercase;
  padding: 14px 8px 4px;
}
.side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--text-soft); font-weight: 500;
  border: none; background: none; width: 100%; text-align: left;
  text-decoration: none;
}
.side-item:hover { background: var(--hover-soft); }
.side-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.side-item .count {
  margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--text-muted);
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.sidebar .spacer { flex: 1; }

/* Botão de tema no rodapé do menu */
.theme-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--input-bg);
  color: var(--text-soft); font-weight: 600;
}
.theme-toggle:hover { background: var(--hover-soft); }
.theme-toggle svg { width: 18px; height: 18px; }

/* ---------- ÁREA PRINCIPAL ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Barra do topo */
.topbar {
  height: 56px; flex-shrink: 0;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
}
.topbar h1 { font-size: 17px; font-weight: 700; margin: 0; }
.topbar .grow { flex: 1; }
.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 12px; width: 260px;
}
.search input { border: none; background: none; outline: none; color: var(--text); width: 100%; font-size: 13px; }
.search svg { width: 16px; height: 16px; color: var(--text-muted); }
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  padding: 9px 16px; border-radius: 8px; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary svg { width: 16px; height: 16px; }

/* ============================================================
   BARRA DE FERRAMENTAS (agrupar / filtrar / ordenar)
   Estas escolhas ficam salvas no navegador de cada analista,
   então o filtro de um NÃO aparece para os outros.
   ============================================================ */
.toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
}
.toolbar .grow { flex: 1; }
.tool { position: relative; }
.tool-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text-soft); padding: 7px 12px; border-radius: 8px;
  font-weight: 600; font-size: 12.5px;
}
.tool-btn:hover { background: var(--hover-soft); }
.tool-btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tool-btn svg { width: 15px; height: 15px; }
.tool-btn b { color: var(--text); }

.tool-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  display: none; min-width: 230px;
  background: var(--modal-bg); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-menu); padding: 6px;
}
.tool-menu.open { display: block; }
.tool-menu .opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 9px; border: none; background: none; border-radius: 7px;
  color: var(--text); font-size: 13px; text-align: left; cursor: pointer;
}
.tool-menu .opt:hover { background: var(--hover-soft); }
.tool-menu .opt.sel { color: var(--accent); font-weight: 600; }
.tool-menu .grp-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted); padding: 10px 9px 4px;
}
.tool-menu label.check {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text);
}
.tool-menu label.check:hover { background: var(--hover-soft); }
.tool-menu input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.tool-menu .divider { height: 1px; background: var(--border-soft); margin: 6px 4px; }

/* Etiquetas dos filtros ativos */
.chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft); color: var(--accent);
  padding: 5px 6px 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.chip button { border: none; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; padding: 2px; border-radius: 50%; }
.chip button:hover { background: rgba(12,102,228,.18); }
.chip button svg { width: 12px; height: 12px; }
.limpar { background: none; border: none; color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.hint-local { font-size: 11.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.hint-local svg { width: 13px; height: 13px; }

/* ============================================================
   QUADRO KANBAN
   ============================================================ */
.board {
  flex: 1; overflow-x: auto; overflow-y: hidden;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 20px;
}
.column {
  width: 280px; flex-shrink: 0;
  background: var(--column-bg);
  border-radius: 12px;
  display: flex; flex-direction: column;
  max-height: 100%;
}
.column-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 8px;
}
.pill {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px; color: #fff;
  white-space: nowrap; text-transform: uppercase;
}
.column-count {
  margin-left: auto; font-size: 12px; font-weight: 700;
  color: var(--text-muted);
  background: var(--card-bg); padding: 1px 9px; border-radius: 999px;
}
.column-body {
  padding: 4px 8px 8px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.column-body.drag-over { background: rgba(12,102,228,.06); border-radius: 8px; }

/* Cartão do cliente */
.card {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .12s, transform .06s;
}
.card:hover { border-color: var(--accent); }
.card:active { transform: scale(.997); }
.card.dragging { opacity: .5; }
.card-title { font-weight: 600; font-size: 14px; line-height: 1.35; margin-bottom: 10px; }
.card-meta { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 12px; }
.card-meta .m { display: inline-flex; align-items: center; gap: 4px; }
.card-meta svg { width: 14px; height: 14px; }
.card-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.card-corretor {
  font-size: 12px; color: var(--text-soft);
  display: inline-flex; align-items: center; gap: 5px;
}
.card-corretor .tico { font-weight: 700; color: var(--text-muted); }
.card-foot .avatar { margin-left: auto; width: 24px; height: 24px; font-size: 10px; }

/* ============================================================
   MODAL DE DETALHES DO CLIENTE
   ============================================================ */
.overlay {
  position: fixed; inset: 0; background: rgba(9,30,66,.54);
  display: none; align-items: flex-start; justify-content: center;
  padding: 40px 16px; z-index: 50; overflow-y: auto;
}
.overlay.open { display: flex; }
.modal {
  background: var(--modal-bg);
  width: 100%; max-width: 900px;
  border-radius: 14px;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  display: grid; grid-template-columns: 1fr 300px;
}
.modal-main { padding: 22px 24px; min-width: 0; }
.modal-side {
  background: var(--column-bg);
  border-left: 1px solid var(--border);
  padding: 20px; display: flex; flex-direction: column;
}
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 8px;
  border: none; background: rgba(0,0,0,.06); color: var(--text);
  display: grid; place-items: center;
}
.modal-close:hover { background: rgba(0,0,0,.12); }
:root[data-theme='dark'] .modal-close { background: rgba(255,255,255,.08); }
:root[data-theme='dark'] .modal-close:hover { background: rgba(255,255,255,.16); }
.modal { position: relative; }

.modal-title { font-size: 22px; font-weight: 700; margin: 0 40px 16px 0; }

/* Linha de propriedades (Status / Responsável / Datas...) */
.props { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; margin-bottom: 22px; }
.props .k { color: var(--text-muted); font-size: 13px; align-self: center; }
.props .v { display: flex; align-items: center; gap: 8px; }
.status-badge {
  font-size: 12px; font-weight: 700; color: #fff;
  padding: 5px 12px; border-radius: 999px; text-transform: uppercase;
}
.person { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }

.section-title {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted); text-transform: uppercase;
  margin: 20px 0 10px;
}
/* Campos do formulário (rótulo + valor) */
.fields { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.field-row {
  display: grid; grid-template-columns: 220px 1fr; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border-soft);
  align-items: center;
}
.field-row:last-child { border-bottom: none; }
.field-row .fk { color: var(--text-muted); font-size: 12.5px; font-weight: 500; }
.field-row .fv { font-size: 13.5px; font-weight: 500; }
.tag {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent);
}

/* Anexos */
.anexos { display: flex; flex-wrap: wrap; gap: 10px; }
.anexo {
  width: 120px; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--card-bg);
}
.anexo .thumb {
  height: 74px; display: grid; place-items: center;
  background: var(--hover-soft); color: var(--text-muted);
}
.anexo .thumb svg { width: 30px; height: 30px; }
.anexo .thumb.pdf { color: #d64545; }
.anexo .thumb.img { color: #3d8f4e; }
.anexo .nome {
  font-size: 11px; padding: 7px 8px; color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Lado direito: atividade / comentários */
.modal-side .section-title { margin-top: 0; }
.activity { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.act {
  display: flex; gap: 10px;
}
.act .avatar { width: 28px; height: 28px; font-size: 11px; }
.act .body { min-width: 0; }
.act .who { font-size: 12.5px; font-weight: 600; }
.act .txt { font-size: 12.5px; color: var(--text-soft); white-space: pre-line; margin-top: 2px; line-height: 1.4; }
.act .when { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.comment-box {
  margin-top: 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--input-bg); padding: 10px 12px;
}
.comment-box textarea {
  width: 100%; border: none; background: none; outline: none;
  resize: none; color: var(--text); font-family: inherit; font-size: 13px;
}
.comment-box .row { display: flex; justify-content: flex-end; margin-top: 6px; }
.comment-box .send {
  background: var(--accent); color: #fff; border: none;
  padding: 6px 14px; border-radius: 7px; font-weight: 600; font-size: 12.5px;
}

/* ============================================================
   DETALHE INTERNO DO CLIENTE (campos editáveis, menus, etc.)
   ============================================================ */

/* Campos que parecem texto até você clicar neles */
.fld {
  width: 100%; border: 1px solid transparent; background: transparent;
  color: var(--text); font: inherit; font-size: 13.5px;
  padding: 6px 8px; border-radius: 7px;
}
.fld:hover { background: var(--hover-soft); }
.fld:focus {
  outline: none; border-color: var(--accent);
  background: var(--input-bg); box-shadow: 0 0 0 3px var(--accent-soft);
}
select.fld { cursor: pointer; }

/* Status e responsável viram botões clicáveis */
.status-badge, .person-btn { border: none; cursor: pointer; }
.person-btn { background: none; padding: 4px 6px; border-radius: 8px; }
.person-btn:hover { background: var(--hover-soft); }

/* Menuzinho que abre para escolher status / responsável */
.menu-pop {
  position: absolute; z-index: 8;
  background: var(--modal-bg); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-menu);
  padding: 6px; min-width: 230px; max-height: 300px; overflow: auto;
}
.menu-pop button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  text-align: left; border: none; background: none;
  padding: 7px 8px; border-radius: 7px; color: var(--text); font-size: 13px;
}
.menu-pop button:hover { background: var(--hover-soft); }

/* Seção da ANÁLISE (resultado que o analista preenche) */
.analise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo-mini label { font-size: 11px; color: var(--text-muted); font-weight: 600; display: block; margin-bottom: 4px; }
.campo-mini input, .parecer textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--input-bg); color: var(--text);
  font: inherit; font-size: 13.5px; outline: none;
}
.campo-mini input:focus, .parecer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.parecer { margin-top: 10px; }
.parecer textarea { resize: vertical; }

/* Barra de ações rápidas no rodapé do detalhe */
.action-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border);
}
.action-bar button {
  border: 1px solid var(--border); background: var(--input-bg);
  color: var(--text-soft); padding: 9px 15px; border-radius: 8px;
  font-weight: 600; font-size: 12.5px;
}
.action-bar button:hover { border-color: var(--accent); color: var(--accent); }
.action-bar button.aprovar { border-color: #22a06b; color: #22a06b; }
.action-bar button.aprovar:hover { background: #22a06b; color: #fff; }
.action-bar button.reprovar { border-color: #c9372c; color: #c9372c; }
.action-bar button.reprovar:hover { background: #c9372c; color: #fff; }

/* Anexo agora é clicável (abre o visualizador) */
.anexo { cursor: pointer; transition: border-color .12s; }
.anexo:hover { border-color: var(--accent); }

/* Selo de porcentagem no cartão, quando já tem análise */
.card-badge {
  font-size: 11px; font-weight: 700; padding: 2px 9px;
  border-radius: 6px; color: #fff;
}

/* Visualizador de documento (abre por cima de tudo) */
.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.82);
  display: none; align-items: center; justify-content: center;
  z-index: 100; padding: 30px;
}
.lightbox.open { display: flex; }
.lightbox .doc {
  background: var(--modal-bg); border-radius: 16px; padding: 30px;
  max-width: 460px; width: 100%; text-align: center; position: relative;
}
.lightbox .doc .big {
  width: 96px; height: 96px; margin: 6px auto 16px; border-radius: 18px;
  display: grid; place-items: center; background: var(--hover-soft);
}
.lightbox .doc .big svg { width: 46px; height: 46px; }
.lightbox .doc .big.pdf { color: #d64545; }
.lightbox .doc .big.img { color: #3d8f4e; }
.lightbox .doc h3 { margin: 0 0 4px; font-size: 16px; word-break: break-all; }
.lightbox .doc p { margin: 0; color: var(--text-muted); font-size: 13px; }
.lightbox .doc .baixar {
  margin-top: 18px; background: var(--accent); color: #fff; border: none;
  padding: 10px 20px; border-radius: 9px; font-weight: 600;
}
.lb-close {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  border: none; border-radius: 8px; background: var(--hover-soft);
  color: var(--text); display: grid; place-items: center;
}

/* Aviso rápido (toast) ao salvar algo */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #172b4d; color: #fff; padding: 11px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 600; box-shadow: var(--shadow-modal);
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   CORES DAS COLUNAS / STATUS
   ============================================================ */
.c-amber     { background: #e2a600; }
.c-blue      { background: #1f6feb; }
.c-magenta   { background: #ae4ad9; }
.c-purple    { background: #6b5bd2; }
.c-green     { background: #22a06b; }
.c-orange    { background: #e07b39; }
.c-red       { background: #c9372c; }
.c-gray      { background: #8590a2; }
.c-green-dark{ background: #1f7a4d; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 820px) {
  .modal { grid-template-columns: 1fr; }
  .modal-side { border-left: none; border-top: 1px solid var(--border); }
  .sidebar { display: none; }
}