/* =============================================================================
   Cocriar CRM - tema administrativo
   -----------------------------------------------------------------------------
   Carregado depois do Bootstrap. Sobrescreve variaveis e adiciona os
   componentes proprios do CRM (menu lateral, cards de metrica, Kanban).

   Paleta:
     azul escuro  -> cor principal, navegacao e acoes primarias
     verde        -> oportunidades, ganhos, indicadores positivos
     laranja      -> follow-ups e prazos proximos
     vermelho     -> alertas, atrasos e perdas
   ========================================================================== */

:root {
  /* Marca */
  --co-navy-900: #0b2140;
  --co-navy-800: #0f2c52;
  --co-navy-700: #16365f;
  --co-navy-600: #1d4478;
  --co-navy-100: #e7edf6;

  --co-green-600: #157f56;
  --co-green-500: #1e9e6a;
  --co-green-100: #e3f5ed;

  --co-orange-600: #c26f10;
  --co-orange-500: #e8871e;
  --co-orange-100: #fdf0e0;

  --co-red-600: #b23636;
  --co-red-500: #d64545;
  --co-red-100: #fbe6e6;

  /* Neutros */
  --co-bg: #f5f7fa;
  --co-surface: #ffffff;
  --co-border: #dde3ec;
  --co-text: #1c2432;
  --co-text-muted: #66748c;

  --co-radius: 10px;
  --co-radius-sm: 6px;
  --co-shadow: 0 1px 2px rgba(15, 44, 82, .06), 0 4px 14px rgba(15, 44, 82, .06);
  --co-sidebar-width: 248px;

  /* Sobrescreve o tema do Bootstrap */
  --bs-primary: var(--co-navy-800);
  --bs-primary-rgb: 15, 44, 82;
  --bs-body-bg: var(--co-bg);
  --bs-body-color: var(--co-text);
  --bs-border-color: var(--co-border);
  --bs-link-color: var(--co-navy-600);
  --bs-link-hover-color: var(--co-navy-800);
  --bs-border-radius: var(--co-radius);
}

body {
  background-color: var(--co-bg);
  color: var(--co-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: .9375rem;
  -webkit-font-smoothing: antialiased;
}

/* --- Estrutura ----------------------------------------------------------- */

.co-layout {
  display: flex;
  min-height: 100vh;
}

.co-sidebar {
  width: var(--co-sidebar-width);
  flex-shrink: 0;
  background: var(--co-navy-800);
  color: #dbe4f0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.co-sidebar__brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -.01em;
}

.co-sidebar__brand:hover { color: #fff; }

.co-sidebar__mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--co-green-500), var(--co-navy-600));
  display: grid;
  place-items: center;
  font-size: .8125rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.co-sidebar__section {
  padding: 1rem 1.25rem .375rem;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(219, 228, 240, .5);
  font-weight: 600;
}

.co-sidebar__nav { padding: .5rem .75rem 1.5rem; }

.co-sidebar__link {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  border-radius: var(--co-radius-sm);
  color: #c9d5e6;
  text-decoration: none;
  font-size: .875rem;
  transition: background-color .15s ease, color .15s ease;
}

.co-sidebar__link:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.co-sidebar__link.is-active {
  background: var(--co-navy-600);
  color: #fff;
  font-weight: 500;
}

.co-sidebar__link .co-icon { opacity: .85; }

.co-sidebar__badge {
  margin-left: auto;
  background: var(--co-orange-500);
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
  padding: .0625rem .375rem;
  border-radius: 20px;
}

.co-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.co-topbar {
  background: var(--co-surface);
  border-bottom: 1px solid var(--co-border);
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

.co-topbar__title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -.01em;
}

.co-content { padding: 1.5rem; flex: 1; }

/* --- Cards de metrica ---------------------------------------------------- */

.co-card {
  background: var(--co-surface);
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius);
  box-shadow: var(--co-shadow);
}

.co-metric {
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  border-left: 3px solid var(--co-navy-600);
}

.co-metric--success { border-left-color: var(--co-green-500); }
.co-metric--warning { border-left-color: var(--co-orange-500); }
.co-metric--danger  { border-left-color: var(--co-red-500); }

.co-metric__label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--co-text-muted);
  font-weight: 600;
}

.co-metric__value {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.co-metric__hint { font-size: .8125rem; color: var(--co-text-muted); }

/* --- Kanban -------------------------------------------------------------- */

.co-kanban {
  display: flex;
  gap: .875rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  align-items: flex-start;
}

.co-kanban__column {
  flex: 0 0 268px;
  background: #eef2f7;
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 190px);
}

.co-kanban__header {
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--co-border);
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
}

.co-kanban__count {
  margin-left: auto;
  background: #fff;
  border: 1px solid var(--co-border);
  border-radius: 20px;
  padding: 0 .4375rem;
  font-size: .75rem;
  color: var(--co-text-muted);
}

.co-kanban__body {
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow-y: auto;
  min-height: 60px;
}

.co-kanban__card {
  background: var(--co-surface);
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius-sm);
  padding: .625rem .75rem;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(15, 44, 82, .05);
}

.co-kanban__card:active { cursor: grabbing; }
.co-kanban__card.is-dragging { opacity: .5; }

/* --- Sinalizacao de prioridade ------------------------------------------ */

.co-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 600;
  padding: .125rem .5rem;
  border-radius: 20px;
}

.co-badge--high    { background: var(--co-green-100); color: var(--co-green-600); }
.co-badge--medium  { background: var(--co-orange-100); color: var(--co-orange-600); }
.co-badge--low     { background: #eef1f6; color: var(--co-text-muted); }
.co-badge--blocked { background: var(--co-red-100); color: var(--co-red-600); }

/* --- Utilitarios --------------------------------------------------------- */

/* Os icones sao um sprite SVG local (assets/img/icons.svg) desenhado com
   tracos, nao preenchimento: herdam a cor do texto e escalam sem perda. */
.co-icon {
  width: 1.0625rem;
  height: 1.0625rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.co-icon--sm { width: .875rem; height: .875rem; }
.co-icon--lg { width: 1.375rem; height: 1.375rem; }

.co-muted { color: var(--co-text-muted); }

.co-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--co-text-muted);
}

.btn-primary {
  --bs-btn-bg: var(--co-navy-800);
  --bs-btn-border-color: var(--co-navy-800);
  --bs-btn-hover-bg: var(--co-navy-700);
  --bs-btn-hover-border-color: var(--co-navy-700);
  --bs-btn-active-bg: var(--co-navy-900);
  --bs-btn-active-border-color: var(--co-navy-900);
}

.btn-success {
  --bs-btn-bg: var(--co-green-500);
  --bs-btn-border-color: var(--co-green-500);
  --bs-btn-hover-bg: var(--co-green-600);
  --bs-btn-hover-border-color: var(--co-green-600);
}

/* --- Status da instalacao (Bloco 0) -------------------------------------- */

.co-check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--co-border);
}

.co-check:last-child { border-bottom: 0; }

.co-check__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: .3125rem;
  flex-shrink: 0;
}

.co-check__dot--ok   { background: var(--co-green-500); }
.co-check__dot--fail { background: var(--co-red-500); }
.co-check__dot--warn { background: var(--co-orange-500); }

.co-check__name { font-weight: 600; font-size: .875rem; }
.co-check__detail { font-size: .8125rem; color: var(--co-text-muted); }

/* --- Responsivo ---------------------------------------------------------- */

@media (max-width: 991.98px) {
  .co-sidebar {
    position: fixed;
    z-index: 1045;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 0 40px rgba(11, 33, 64, .3);
  }

  .co-sidebar.is-open { transform: translateX(0); }

  .co-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 33, 64, .45);
    z-index: 1040;
  }

  .co-content { padding: 1rem; }
}

@media (min-width: 992px) {
  .co-sidebar-toggle { display: none; }
  .co-backdrop { display: none; }
}

/* --- Telas de acesso e paginas publicas ---------------------------------- */

.co-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(160deg, var(--co-navy-900), var(--co-navy-600));
}

.co-auth__box { width: 100%; max-width: 420px; }

.co-auth__brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: #fff;
  font-weight: 600;
  font-size: 1.125rem;
}

.co-public { background: var(--co-bg); }

.co-public__wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.co-public__card {
  background: var(--co-surface);
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius);
  box-shadow: var(--co-shadow);
  padding: 2rem;
  max-width: 520px;
  margin: 3rem auto;
}

/* --- Proposta vista pelo cliente ----------------------------------------- */

.co-proposal {
  background: var(--co-surface);
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius);
  box-shadow: var(--co-shadow);
  padding: 2.5rem;
}

.co-proposal__header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--co-navy-800);
  margin-bottom: 1.5rem;
}

.co-proposal__brand {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--co-text-muted);
}

.co-proposal__actions {
  background: var(--co-navy-100);
  border-radius: var(--co-radius);
  padding: 1.5rem;
  margin-top: 2rem;
}

.co-proposal__footer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--co-border);
}

@media print {
  .co-proposal__actions { display: none; }
  .co-proposal { border: 0; box-shadow: none; padding: 0; }
}

/* --- Linha do tempo do lead ---------------------------------------------- */

.co-timeline__item {
  padding: .75rem 0;
  border-bottom: 1px solid var(--co-border);
}

.co-timeline__item:last-child { border-bottom: 0; }

/* --- Previa de e-mail ---------------------------------------------------- */

.co-preview {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius-sm);
  background: #fff;
}

/* --- Grafico de barras dos relatorios ------------------------------------ */

.co-chart {
  display: flex;
  align-items: flex-end;
  gap: .375rem;
  height: 180px;
  padding-top: .5rem;
}

.co-chart__bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.co-chart__fill {
  width: 100%;
  min-height: 2px;
  background: var(--co-navy-600);
  border-radius: 3px 3px 0 0;
}

.co-chart__label {
  font-size: .6875rem;
  color: var(--co-text-muted);
  margin-top: .25rem;
}

/* --- Kanban: estado de arraste ------------------------------------------- */

.co-kanban__card[draggable="true"] { cursor: grab; }
.co-kanban__card.is-dragging { opacity: .4; }
.co-kanban__body { min-height: 60px; }