/* Material Design 3 — implementação estática do opendrive.
   Tokens do sistema (cor, tipo, shape, elevação) + os componentes que usamos:
   top app bar, navigation tabs, data table, text field, botões, card.
   Sem webfonts: type scale MD3 sobre a pilha do sistema. */

:root {
  /* Density tokens (L36): the vertical rhythm of the app lives HERE — content
     padding, card padding, table cell padding, section gaps. Tuning density
     is editing these four lines, not hunting literals. */
  --od-pad-content: 14px;
  --od-pad-card: 10px 14px 8px;
  --od-cell-py: 8px;
  --od-gap-section: 10px;

  /* color roles — light (seed: azul 40) */
  --md-sys-color-primary: #0b57d0;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d3e3fd;
  --md-sys-color-on-primary-container: #041e49;
  --md-sys-color-secondary-container: #c2e7ff;
  --md-sys-color-on-secondary-container: #001d35;
  --md-sys-color-surface: #f9f9ff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container: #ededf4;
  --md-sys-color-surface-container-high: #e7e8ee;
  --md-sys-color-on-surface: #1a1b20;
  --md-sys-color-on-surface-variant: #44474e;
  --md-sys-color-outline: #74777f;
  --md-sys-color-outline-variant: #c4c6d0;
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-on-error-container: #410e0b;

  /* Custom color roles (MD3 permite cores customizadas com os mesmos papéis).
     REGRA DE PROJETO: estado nunca é distinguido só por tom da mesma matiz —
     cada estado tem matiz própria e legenda textual. Ver chips abaixo. */
  --md-sys-color-success-container: #c4eed0;
  --md-sys-color-on-success-container: #06281a;
  --md-sys-color-warning-container: #ffdfa0;
  --md-sys-color-on-warning-container: #2a1800;
  --md-sys-color-info-container: #d3e3fd;
  --md-sys-color-on-info-container: #041e49;

  /* Escala da PRÓXIMA ATIVIDADE. Um token por estado, usado igual na lista, nos
     cards dos dois kanbans e no detalhe — antes eram hex soltos que só existiam
     nas regras da tabela, e por isso card e detalhe não combinavam com a lista. */
  --md-act-overdue: #b3261e;
  --md-act-today:   #b06000;
  --md-act-future:  #1b6b3a;
  --md-act-none:    #74777f;

  /* PARADO (rotting) é outro sinal, então tem matiz própria — violeta. Usar
     vermelho aqui fazia "vermelho" significar duas coisas diferentes
     dependendo da tela (atividade atrasada no card, parado na borda). */
  --md-stale: #6a4bbc;
  --md-sys-color-stale-container: #e9ddff;
  --md-sys-color-on-stale-container: #22005d;

  /* shape */
  --md-sys-shape-corner-full: 999px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-small: 8px;

  /* elevação (level1/level2) */
  --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --md-sys-elevation-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);

  --md-ref-typeface: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --md-ref-typeface-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #a8c7fa;
    --md-sys-color-on-primary: #062e6f;
    --md-sys-color-primary-container: #0842a0;
    --md-sys-color-on-primary-container: #d3e3fd;
    --md-sys-color-secondary-container: #004a77;
    --md-sys-color-on-secondary-container: #c2e7ff;
    --md-sys-color-surface: #111318;
    --md-sys-color-surface-container-lowest: #0c0e13;
    --md-sys-color-surface-container: #1d2024;
    --md-sys-color-surface-container-high: #282a2f;
    --md-sys-color-on-surface: #e2e2e9;
    --md-sys-color-on-surface-variant: #c4c6d0;
    --md-sys-color-outline: #8e9099;
    --md-sys-color-outline-variant: #44474e;
    --md-sys-color-error: #f2b8b5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8c1d18;
    --md-sys-color-on-error-container: #f9dedc;

    --md-sys-color-success-container: #205032;
    --md-sys-color-on-success-container: #c4eed0;
    --md-sys-color-warning-container: #5c4200;
    --md-sys-color-on-warning-container: #ffdfa0;
    --md-sys-color-info-container: #0842a0;
    --md-sys-color-on-info-container: #d3e3fd;

    --md-act-overdue: #f2b8b5;
    --md-act-today:   #ffc46b;
    --md-act-future:  #7fd39b;
    --md-act-none:    #8e9099;

    --md-stale: #cfbcff;
    --md-sys-color-stale-container: #4f378a;
    --md-sys-color-on-stale-container: #e9ddff;
  }
}

/* base */
* { box-sizing: border-box; }

/* O atributo hidden do HTML vale menos que qualquer regra que declare display, e
   qualquer componente nosso que use display:flex o anula sem avisar. Aconteceu
   duas vezes: o seletor de escala do gráfico e os itens filtrados do painel do
   Insights continuavam na tela com hidden="" no DOM. Uma linha resolve a CLASSE
   do problema; o !important aqui é o idiom para isto. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-ref-typeface);
  font-size: 14px; /* body-medium */
  line-height: 20px;
  letter-spacing: .25px;
}
a { color: var(--md-sys-color-primary); text-decoration: none; }

/* type scale */
.md-headline-small { font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: 0; }
.md-title-large    { font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: 0; }
.md-title-medium   { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: .15px; }
.md-label-large    { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .1px; }
.md-body-small     { font-size: 12px; line-height: 16px; letter-spacing: .4px;
                     color: var(--md-sys-color-on-surface-variant); }

/* top app bar */
.md-top-app-bar {
  display: flex; align-items: center; gap: 16px;
  height: 64px; padding: 0 16px;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  position: sticky; top: 0; z-index: 10;
}
.md-top-app-bar .spacer { flex: 1; }

/* navigation tabs (primary tabs) */
.md-tabs { display: flex; gap: 4px; }
.md-tab {
  padding: 10px 16px 8px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px; font-weight: 500; letter-spacing: .1px;
}
.md-tab:hover { background: var(--md-sys-color-surface-container-high); }
.md-tab.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* conteúdo */
main.md-content { padding: var(--od-pad-content); max-width: 1280px; margin: 0 auto; }

/* card */
.md-card {
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
}

/* data table */
.md-table-wrap { overflow-x: auto; }
table.md-table { border-collapse: collapse; width: 100%; }
.md-table th {
  text-align: left; padding: var(--od-cell-py) 16px;
  font-size: 12px; font-weight: 500; letter-spacing: .5px;
  color: var(--md-sys-color-on-surface-variant);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  white-space: nowrap;
  position: sticky; top: 0;
  background: var(--md-sys-color-surface-container-lowest);
}
.md-table td {
  padding: var(--od-cell-py) 16px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  white-space: nowrap; max-width: 340px;
  overflow: hidden; text-overflow: ellipsis;
}
.md-table tbody tr:hover { background: var(--md-sys-color-surface-container); }
.md-table td.num, .md-table th.num { text-align: right; }
.mono { font-family: var(--md-ref-typeface-mono); font-size: 12px; }

/* status chips (assist chip, tonalizado por status) */
.md-chip {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px;
  border-radius: var(--md-sys-shape-corner-small);
  font-size: 12px; font-weight: 500; letter-spacing: .3px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}
/* REGRA DE PROJETO — cor de chip é semântica e as matizes têm que ser
   distinguíveis entre si (e não só tons da mesma cor):
     open = azul (em andamento) · won = verde (sucesso) · lost = vermelho (perda)
     deleted/neutro = cinza de superfície
   Nunca use dois containers da mesma matiz para estados diferentes; foi o erro
   original (open em primary-container e won em secondary-container, ambos azuis). */
.md-chip.open    { background: var(--md-sys-color-info-container);
                   color: var(--md-sys-color-on-info-container); }
.md-chip.won     { background: var(--md-sys-color-success-container);
                   color: var(--md-sys-color-on-success-container); }
.md-chip.lost    { background: var(--md-sys-color-error-container);
                   color: var(--md-sys-color-on-error-container); }
.md-chip.deleted { background: var(--md-sys-color-surface-container-high);
                   color: var(--md-sys-color-on-surface-variant);
                   text-decoration: line-through; }
/* chip de confiança: matiz neutra de propósito, para não competir com o status */
.md-chip.neutral { background: var(--md-sys-color-surface-container-high);
                   color: var(--md-sys-color-on-surface-variant); }

/* botões */
.md-button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 24px; border: none; cursor: pointer;
  border-radius: var(--md-sys-shape-corner-full);
  font: inherit; font-weight: 500; letter-spacing: .1px;
}
.md-button.filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.md-button.filled:hover { box-shadow: var(--md-sys-elevation-1); }
.md-button.text { background: transparent; color: var(--md-sys-color-primary); padding: 0 12px; }
.md-button.text:hover { background: var(--md-sys-color-surface-container-high); }
.md-button:disabled { opacity: .38; cursor: default; box-shadow: none; }

/* text field (outlined) */
.md-field { display: block; position: relative; margin: 24px 0 8px; }
.md-field input {
  width: 100%; height: 56px; padding: 0 16px;
  font: inherit; color: var(--md-sys-color-on-surface);
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
}
/* textarea veste o mesmo uniforme do input (o campo de explicação do artefato
   nasceu pelado — o md-field só vestia input) */
.md-field textarea {
  width: 100%; padding: 12px 16px; resize: vertical; min-height: 88px;
  font: inherit; color: var(--md-sys-color-on-surface);
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
}
.md-field textarea:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}
.md-field input:focus {
  outline: none;
  border: 2px solid var(--md-sys-color-primary);
  padding: 0 15px;
}
.md-field label {
  position: absolute; top: -8px; left: 12px; padding: 0 4px;
  font-size: 12px; letter-spacing: .4px;
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface);
}

/* paginação */
.md-pagination {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  color: var(--md-sys-color-on-surface-variant); font-size: 12px;
}
.md-pagination .spacer { flex: 1; }

/* login */
.md-login {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
}
.md-login .md-card { width: min(420px, 100%); padding: 32px; box-shadow: var(--md-sys-elevation-2); border: none; }

/* banner de erro */
.md-error-banner {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border-radius: var(--md-sys-shape-corner-small);
  padding: 12px 16px; margin-bottom: 16px; font-size: 13px;
}

/* ---------- view bar, segmented button, filtros ---------- */
main.md-content.wide { max-width: none; }

/* flex-wrap é obrigatório aqui: sem ele, em tela estreita o seletor de visão
   encolhia e — como .md-segmented tem overflow:hidden — os três segmentos eram
   CORTADOS até desaparecer, deixando a tela de negócios sem como trocar entre
   lista, funil e confiança no celular. */
.md-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 14px; }
.md-viewbar .spacer { flex: 1; }

.md-segmented { display: inline-flex; flex: 0 0 auto;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full); overflow: hidden; }
.md-segment { padding: 9px 20px; font-size: 14px; font-weight: 500;
  white-space: nowrap; color: var(--md-sys-color-on-surface); }
@media (max-width: 720px) {
  /* o seletor de visão é a primeira coisa que tem que caber */
  .md-segment { padding: 9px 14px; }
  .md-viewbar { gap: 8px; }
}
.md-segment + .md-segment { border-left: 1px solid var(--md-sys-color-outline); }
.md-segment.selected { background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container); }

.md-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: var(--od-pad-card); margin-bottom: var(--od-gap-section); }
.md-select { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.md-select.grow { flex: 1; min-width: 220px; }
/* Teto de largura do campo de filtro. Sem ele, o <select> de ETAPA crescia até
   ~310px (o conteúdo é "Private BR · Cliente potencial") e empurrava o botão
   "Filtrar" para uma segunda linha, onde ele ficava órfão e cortado. O teto vale só
   no cartão de filtros: em formulário de edição um campo largo é bem-vindo. */
.md-filters .md-select { max-width: 200px; }
.md-filters .md-select.grow { max-width: none; }
.md-filters .md-select select { text-overflow: ellipsis; }
.md-select.block { display: flex; margin: 18px 0; }
.md-select > span { font-size: 12px; letter-spacing: .4px;
  color: var(--md-sys-color-on-surface-variant); }
.md-select select, .md-select input {
  height: 40px; padding: 0 12px; font: inherit; color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small); }
.md-select select:focus, .md-select input:focus {
  outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px; }

/* ---------- kanban ----------
   As colunas preenchem a altura disponível por FLEX, não por número mágico:
   .md-shell-main é coluna flex, o <main> do board cresce, e o board recebe
   min-height:0 para que o overflow dos cards funcione. Antes havia um
   max-height: calc(100dvh - 300px) que reservava uma faixa morta no rodapé e
   encurtava a área útil sem entregar nada. */
main.md-content.board { display: flex; flex-direction: column; flex: 1;
  min-height: 0; padding-bottom: 12px; }
.md-shell-main { display: flex; flex-direction: column; }

.md-kanban { display: flex; gap: 12px; overflow-x: auto;
  align-items: stretch; flex: 1; min-height: 0; padding-bottom: 4px; }
.md-kanban-col {
  flex: 0 0 300px; display: flex; flex-direction: column; min-height: 0;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-large); }
.md-kanban-col > header {
  padding: 12px 14px 10px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.md-kanban-total { margin-top: 4px; font-size: 12px;
  color: var(--md-sys-color-primary); font-weight: 600; }
.md-kanban-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; min-height: 0; flex: 1; }
.md-kanban-card {
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 12px; cursor: grab; box-shadow: var(--md-sys-elevation-1); }
.md-kanban-card:active { cursor: grabbing; }
/* (a marcação de parado está junto com a de atividade, mais abaixo) */
.md-kanban-card footer { display: flex; align-items: center; gap: 8px;
  margin-top: 10px; flex-wrap: wrap; }

/* ---------- menu flutuante (hoje só o de colunas da lista) ---------- */
.md-menu { position: absolute; right: 0; top: 48px; z-index: 20; min-width: 190px;
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-small);
  box-shadow: var(--md-sys-elevation-2); padding: 8px 0; }
.md-menu button { display: block; width: 100%; text-align: left;
  padding: 12px 16px; border: none; background: none; cursor: pointer;
  font: inherit; color: var(--md-sys-color-on-surface); }
.md-menu button:hover { background: var(--md-sys-color-surface-container); }

/* ---------- dialog ---------- */
.md-dialog { border: none; padding: 0; max-width: 560px; width: calc(100% - 32px);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-2); }
.md-dialog::backdrop { background: rgba(0,0,0,.42); }
.md-dialog form { padding: 24px; }
.md-dialog h2 { margin: 0 0 4px; }
.md-dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.md-dialog-actions { display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 24px; }
.md-dialog .md-field label { background: var(--md-sys-color-surface-container-lowest); }

/* ---------- navigation drawer / rail retrátil (padrão Pipedrive) ---------- */
.md-shell { display: flex; min-height: 100dvh; }
.md-shell-main { flex: 1; min-width: 0; }

.md-nav {
  flex: 0 0 260px; z-index: 5; display: flex; flex-direction: column;
  background: var(--md-sys-color-surface-container);
  border-right: 1px solid var(--md-sys-color-outline-variant);
  position: sticky; top: 0; height: 100dvh;
  transition: flex-basis .18s ease;
  /* O drawer tem altura fixa de tela; sem isso, numa tela baixa (celular de
     lado, barra de endereço aberta) os últimos itens e o rodapé ficavam
     cortados e não havia como alcançá-los. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-collapsed .md-nav { flex-basis: 72px; }

.md-nav-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.md-nav-brand { white-space: nowrap; overflow: hidden; }
.nav-collapsed .md-nav-brand { display: none; }

.md-icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
}
.md-icon-button:hover { background: var(--md-sys-color-surface-container-high); }
.md-icon-button svg { width: 22px; height: 22px; fill: currentColor; }

/* Numa tela baixa (celular), o drawer de 100dvh não cabe: cabeça + 6 itens +
   rodapé passam de 480px. min-height:0 deixa a lista encolher em vez de empurrar
   o rodapé para fora, e overflow-y:auto faz ELA rolar — sem os dois, o excesso
   era simplesmente cortado, sem rolagem nenhuma. Cabeça e rodapé ficam fixos,
   que é o comportamento esperado de um drawer. */
.md-nav-items { display: flex; flex-direction: column; gap: 4px; padding: 8px;
  flex: 1; min-height: 0; overflow-y: auto; }
.md-nav-item {
  display: flex; align-items: center; gap: 12px;
  /* flex: 0 0 48px, e não só height: num drawer baixo os itens eram ACHATADOS
     pelo flex-shrink (48px viravam ~10px) em vez de a lista transbordar e
     rolar. */
  height: 48px; flex: 0 0 48px; padding: 0 16px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px; font-weight: 500; letter-spacing: .1px;
  white-space: nowrap; overflow: hidden;
}
.md-nav-item svg { width: 22px; height: 22px; flex: 0 0 22px; fill: currentColor; }
.md-nav-item:hover { background: var(--md-sys-color-surface-container-high);
  text-decoration: none; }
.md-nav-item.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
.nav-collapsed .md-nav-item { justify-content: center; padding: 0; }
.nav-collapsed .md-nav-label { display: none; }

.md-nav-foot { padding: 12px; display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--md-sys-color-outline-variant); }
/* rodapé do drawer: nome, papel e os links de preferências (rotas próprias) */
.md-nav-user div.md-body-small { color: var(--md-sys-color-on-surface-variant); }
.md-nav-user a { display: block; margin-top: 6px; text-decoration: none;
  color: var(--md-sys-color-primary); }
.md-nav-user a:hover { text-decoration: underline; }

/* Rodapé em duas versões: texto quando o drawer é largo, ícones quando é
   estreito. O estreito acontece por escolha (recolhido) ou por tela (celular),
   e nos dois casos as MESMAS ações continuam alcançáveis. */
.md-nav-foot-icons { display: none; }
.md-nav-foot-icons { flex-direction: column; align-items: center; gap: 4px; }
/* o avatar no rodapé é alvo de toque, então cresce em relação ao dos cards */
.md-nav-foot-icons .md-avatar { width: 28px; height: 28px; flex: 0 0 28px;
  font-size: 11px; }

.nav-collapsed .md-nav-user,
.nav-collapsed .md-nav-signout { display: none; }
.nav-collapsed .md-nav-foot { align-items: center; }
.nav-collapsed .md-nav-foot-icons { display: flex; }

@media (max-width: 720px) {
  .md-nav { flex-basis: 72px; }
  .md-nav-brand, .md-nav-label, .md-nav-user { display: none; }
  .md-nav-item { justify-content: center; padding: 0; }
  .md-nav-signout { display: none; }
  .md-nav-foot { align-items: center; }
  .md-nav-foot-icons { display: flex; }
}

/* dono no card do funil */
.md-owner { display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  max-width: 55%; }
.md-owner .md-body-small { white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.md-avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-size: 10px; font-weight: 600; letter-spacing: .3px; }

/* coluna "sem classificação" do kanban de confiança: tratada como pendência */
.md-kanban-col.unclassified {
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}
.md-kanban-col.unclassified > header { border-bottom-color: rgba(0,0,0,.15); }
.md-kanban-col.unclassified .md-body-small { color: inherit; opacity: .8; }

/* sentinela da rolagem infinita das colunas do kanban */
.md-load-more { padding: 10px 8px; text-align: center; opacity: .75; }

/* ---------- tela de detalhe do negócio ---------- */
.md-table tbody tr.clickable { cursor: pointer; }
.md-kanban-card { user-select: none; }

.md-detail-head { display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 16px; flex-wrap: wrap; }
.md-detail-head .spacer { flex: 1; }
.md-detail-title h1 { margin: 0 0 2px; }
.md-detail-value { text-align: right; display: flex; flex-direction: column;
  align-items: flex-end; gap: 6px; }

/* Grade de painéis do detalhe. O Pipedrive usa a largura toda em três colunas:
   dados à esquerda, compositor no centro, feeds à direita. Antes eram duas
   colunas dentro de um container de 1280px, o que desperdiçava a tela larga. */

.md-detail-grid { display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(300px, 360px) minmax(420px, 1.4fr) minmax(320px, 1fr); }
@media (max-width: 1500px) {
  .md-detail-grid { grid-template-columns: minmax(280px, 340px) 1fr; }
}
/* Detalhe de pessoa/organização/produto: DETALHES é o conteúdo principal —
   campos, preços e variações editáveis — e domina a tela (~60%). Os
   relacionados (negócios, resumo) são a coluna secundária à direita. */
.md-detail-grid.two { grid-template-columns: 1.5fr minmax(360px, 1fr); }
@media (max-width: 900px) { .md-detail-grid.two { grid-template-columns: 1fr; } }
/* com o painel largo, o rótulo do campo ganha espaço e o valor também */
.md-detail-grid.two .md-field-row { grid-template-columns: 170px 1fr; }
.md-detail-grid.two .md-detail-panel { padding: 14px 18px; }
@media (max-width: 900px) { .md-detail-grid { grid-template-columns: 1fr; } }
.md-detail-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.md-detail-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.md-detail-panel { padding: 12px 14px; }
.md-detail-panel h2 { margin: 0 0 10px; }
.md-detail-panel h2 + h2, .md-detail-panel .md-kv + h2 { margin-top: 20px; }

.md-kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px;
  margin: 0; align-items: center; }
.md-kv dt { color: var(--md-sys-color-on-surface-variant); font-size: 12px;
  letter-spacing: .4px; }
.md-kv dd { margin: 0; }
.md-inline-form { display: contents; }
.md-inline-form select { width: 100%; height: 36px; padding: 0 10px; font: inherit;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small); }

.md-status-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.md-button.filled.won { background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container); }
.md-button.text.lost { color: var(--md-sys-color-error); }

/* feeds (atividades, notas, histórico) */
.md-feed { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; }
.md-feed li { display: flex; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.md-feed li:last-child { border-bottom: none; }
.md-feed.timeline li { border-left: 2px solid var(--md-sys-color-outline-variant);
  padding-left: 12px; margin-left: 4px; border-bottom: none; }
.md-table tfoot th { padding: 10px 16px; font-size: 12px;
  border-top: 1px solid var(--md-sys-color-outline-variant); }
.md-table tfoot th.num { text-align: right; }

/* ---------- edição inline (click-to-edit) ---------- */
.md-field-row { display: grid; grid-template-columns: 128px 1fr; gap: 10px;
  align-items: center; padding: 5px 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.md-field-row:last-child { border-bottom: none; }
.md-field-label { font-size: 12px; letter-spacing: .4px;
  color: var(--md-sys-color-on-surface-variant); }
.md-field-value { display: block; width: 100%; text-align: left;
  padding: 7px 8px; border: 1px solid transparent; border-radius: var(--md-sys-shape-corner-small);
  background: none; color: inherit; font: inherit; cursor: text; }
.md-field-value:hover { background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline-variant); }
.md-empty { color: var(--md-sys-color-on-surface-variant); }
.md-field-edit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.md-field-edit input, .md-field-edit select {
  flex: 1; min-width: 90px; height: 34px; padding: 0 8px; font: inherit;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  border: 2px solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-small); }
.md-field-edit input[name=currency] { flex: 0 0 56px; min-width: 0; }
.md-button.tiny { height: 30px; padding: 0 12px; font-size: 13px; }
.md-field-error { flex: 1 0 100%; font-size: 12px; color: var(--md-sys-color-error); }
/* campo derivado (valor com produtos): não é editável aqui, e diz de onde vem */
.md-field-derived { display: flex; flex-direction: column; gap: 2px;
  padding: 7px 8px; }

/* notas com HTML preservado */
.md-note { padding: 12px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.md-note:last-child { border-bottom: none; }
.md-note-body { overflow-wrap: anywhere; }
.md-note-body p { margin: 0 0 8px; }
.md-note-body p:last-child { margin-bottom: 0; }
.md-note-body ul, .md-note-body ol { margin: 6px 0; padding-left: 22px; }
.md-note-body a { text-decoration: underline; }
.md-note-body table { border-collapse: collapse; margin: 6px 0; }
.md-note-body td, .md-note-body th { border: 1px solid var(--md-sys-color-outline-variant);
  padding: 4px 8px; }
.md-note-meta { margin-top: 6px; }

/* Barra de progresso do funil — fina, como no Pipedrive. Uma barra só (a
   trilha de chevrons foi removida: eram duas fazendo a mesma coisa). Verde
   apenas até a etapa atual, senão não é progresso. */
.md-stage-bar { display: flex; gap: 2px; margin-bottom: 8px; }
.md-stage-form { display: contents; }
.md-stage-seg {
  flex: 1; min-width: 0; height: 26px; padding: 0 8px; border: none;
  cursor: pointer; font: inherit; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap; overflow: hidden;
}
.md-stage-bar > .md-stage-form:first-child .md-stage-seg {
  border-radius: var(--md-sys-shape-corner-full) 0 0 var(--md-sys-shape-corner-full); }
.md-stage-bar > .md-stage-form:last-child .md-stage-seg {
  border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0; }
.md-stage-seg:hover { outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px; }
.md-stage-seg.passed { background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container); }
.md-stage-seg.current { background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary); }
.md-stage-name { overflow: hidden; text-overflow: ellipsis; }
.md-stage-days { font-weight: 400; opacity: .8; }

/* compositor de notas/atividades */
.md-composer-tabs { display: flex; gap: 4px; margin-bottom: 12px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.md-composer-tab { padding: 8px 14px; border: none; background: none; cursor: pointer;
  font: inherit; font-weight: 500; color: var(--md-sys-color-on-surface-variant);
  border-bottom: 2px solid transparent; }
.md-composer-tab.active { color: var(--md-sys-color-primary);
  border-bottom-color: var(--md-sys-color-primary); }
.md-composer textarea { width: 100%; min-height: 84px; padding: 10px; font: inherit;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small); }
.md-composer-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
  align-items: center; }
.md-composer-row input, .md-composer-row select { height: 38px; padding: 0 10px;
  font: inherit; color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small); }
/* Linha de formulário com campos rotulados. Existe porque .md-composer-row
   centraliza (align-items:center) e serve a controles SEM legenda — misturar os
   dois faz o campo rotulado subir em relação aos outros, que é o desalinhamento
   que apareceu no "Add user" e antes na barra de filtros. Aqui todo campo tem
   legenda e o alinhamento é pela BASE, então a fileira de controles fica reta
   mesmo quando uma legenda quebra em duas linhas. */
.md-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.md-form-row .md-select { min-width: 150px; }
/* O que não tem legenda (checkbox, botão) acompanha a ALTURA do controle, não a
   do conjunto legenda+controle: 40px é a altura de .md-select input/select. */
.md-form-row > .md-form-inline { display: flex; align-items: center; gap: 6px; height: 40px; }
.md-form-row > .md-button { height: 40px; }

.md-type-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.md-type-chip { padding: 7px 14px; border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline); cursor: pointer;
  font-size: 13px; font-weight: 500; background: none;
  color: var(--md-sys-color-on-surface); }
.md-type-chip input { position: absolute; opacity: 0; pointer-events: none; }
.md-type-chip:has(input:checked) { background: var(--md-sys-color-secondary-container);
  border-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container); }

/* ---------- barra de lista e menu de colunas ---------- */
/* a barra da lista agora é a listtoolbar (busca + filtros + criar + colunas) */
.md-colmenu { position: relative; }
.md-colmenu > summary { list-style: none; }
.md-colmenu > summary::-webkit-details-marker { display: none; }
.md-colform { right: 0; left: auto; top: 46px; min-width: 240px; padding: 14px;
  max-height: 70vh; overflow-y: auto; }
.md-colopt { display: flex; gap: 8px; align-items: center; padding: 5px 0;
  font-size: 13px; color: var(--md-sys-color-on-surface); }

/* cor da linha pela próxima atividade (código do Pipedrive) */
.md-table tbody tr.act-overdue td:first-child { box-shadow: inset 3px 0 var(--md-act-overdue); }
.md-table tbody tr.act-overdue td { color: var(--md-act-overdue); }
.md-table tbody tr.act-today td:first-child { box-shadow: inset 3px 0 var(--md-act-today); }
.md-table tbody tr.act-today td { color: var(--md-act-today); }
.md-table tbody tr.act-future td:first-child { box-shadow: inset 3px 0 var(--md-act-future); }
.md-table tbody tr.act-future td { color: var(--md-act-future); }

.md-legend { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.md-legend::before { content: ""; width: 10px; height: 10px; border-radius: 2px;
  background: var(--md-act-none); }
.md-legend.act-overdue::before { background: var(--md-act-overdue); }
.md-legend.act-today::before { background: var(--md-act-today); }
.md-legend.act-future::before { background: var(--md-act-future); }
.md-legend.stale::before { background: var(--md-stale); border-radius: 999px; }

/* ---------- sinais de atenção do negócio (lista, cards e detalhe) ----------
   Duas linguagens distintas de propósito: atividade é PONTO na escala
   vermelho/âmbar/verde/cinza; parado é PÍLULA violeta com os dias. */
.md-act-dot { display: inline-block; width: 9px; height: 9px; flex: 0 0 9px;
  border-radius: 999px; background: var(--md-act-none); }
.md-act-dot.act-overdue { background: var(--md-act-overdue); }
.md-act-dot.act-today   { background: var(--md-act-today); }
.md-act-dot.act-future  { background: var(--md-act-future); }
/* nenhuma agendada: oco, para não competir com os estados que pedem ação */
.md-act-dot.act-none { background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--md-act-none); }

.md-stale-mark { display: inline-flex; align-items: center; gap: 3px;
  padding: 0 6px; height: 18px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-stale-container);
  color: var(--md-sys-color-on-stale-container);
  font-size: 11px; font-weight: 600; white-space: nowrap; }
.md-stale-mark svg { width: 12px; height: 12px; fill: currentColor; }

/* card parado: borda TRACEJADA na matiz de parado — o traço já diferencia de
   qualquer coisa da escala de atividade, mesmo para quem não distingue matiz */
.md-kanban-card.rotten { border-left: 4px dashed var(--md-stale); }

.md-chip.stale { background: var(--md-sys-color-stale-container);
  color: var(--md-sys-color-on-stale-container); display: inline-flex;
  align-items: center; gap: 4px; }
.md-chip.stale svg { width: 13px; height: 13px; fill: currentColor; }

/* linha de sinais no cabeçalho do detalhe */
.md-deal-signals { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.md-deal-signals .md-body-small { color: var(--md-sys-color-on-surface-variant); }

/* ---------- painéis retráteis em três estados ----------
   compacto (só contagem) · semi (5 últimas, default) · tudo.
   O estado vive em radios e o CSS faz o resto: sem JavaScript, e recarregar a
   página volta ao default semi, que é o pedido. */
.md-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.md-panel-head h2 { margin: 0; }
.md-panel-head .spacer { flex: 1; }
.md-count { display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 11px; font-weight: 600; }

.md-collapse-ctl { display: inline-flex; border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full); overflow: hidden; }
.md-collapse-ctl label { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 26px; cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--md-sys-color-on-surface-variant); }
.md-collapse-ctl label + label { border-left: 1px solid var(--md-sys-color-outline-variant); }
.md-collapse-ctl input { position: absolute; opacity: 0; pointer-events: none; }
.md-collapse-ctl label:has(input:checked) {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container); }

/* compacto: corpo inteiro fora */
.md-collapsible:has(.md-collapse-ctl input[value="compact"]:checked) .md-panel-body {
  display: none; }

/* semi: só as 5 primeiras entradas, qualquer que seja o tipo de lista */
.md-collapsible:has(.md-collapse-ctl input[value="semi"]:checked) .md-panel-body > .md-note:nth-of-type(n+6),
.md-collapsible:has(.md-collapse-ctl input[value="semi"]:checked) .md-panel-body .md-feed > li:nth-child(n+6),
.md-collapsible:has(.md-collapse-ctl input[value="semi"]:checked) .md-panel-body tbody > tr:nth-child(n+6) {
  display: none; }

/* aviso de truncagem: aparece só no semi e quando há mais que 5 */
.md-collapsible .md-more-hint { display: none; }
.md-collapsible:has(.md-collapse-ctl input[value="semi"]:checked) .md-more-hint {
  display: block; }

/* ---------- editor de itens de linha (página própria) ----------
   Cabeçalho e linhas usam o MESMO grid-template (--cols). Era isso que faltava:
   antes as linhas eram flex dentro de colspan, então os títulos não batiam com
   as colunas. */
.md-items {
  --cols: minmax(220px, 2.4fr) minmax(110px, 1fr) 104px 84px 74px 78px 92px 74px 116px 96px;
  padding: 0; overflow-x: auto;
}
.md-items-header, .md-item-row {
  display: grid; grid-template-columns: var(--cols);
  gap: 8px; align-items: center; padding: 8px 14px; min-width: 1180px;
}
.md-items-header {
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  color: var(--md-sys-color-on-surface-variant);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
  position: sticky; top: 0; z-index: 1;
}
.md-items-header .num, .md-item-row .num { text-align: right; }
.md-item-row { border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.md-item-row:hover { background: var(--md-sys-color-surface-container); }
.md-item-row input, .md-item-row select, .md-item-row textarea {
  width: 100%; min-width: 0; height: 34px; padding: 0 8px; font: inherit;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
}
.md-item-row input.num { text-align: right; }
.md-item-row select:disabled { opacity: .5; }

/* célula do produto: um campo só. Antes havia dois inputs empilhados com o
   mesmo conteúdo (produto e descrição), o que parecia campo duplicado — a
   descrição foi para a linha expandida. */
.md-combo-input { font-weight: 500; }

.md-item-total { text-align: right; font-weight: 600; }
.md-item-actions { display: flex; gap: 4px; justify-content: flex-end; }
.md-item-new { background: var(--md-sys-color-surface-container); }
.md-button.text.danger { color: var(--md-sys-color-error); }

/* Expansão da linha: abre ao clicar na linha (classe .expanded posta por um
   handler de 3 linhas). A versão anterior usava checkbox + :has() e não
   funcionava de forma previsível; e o gesto do Pipedrive é clicar na linha. */
.md-item-extra { grid-column: 1 / -1; display: none; }
.md-item-row.expanded { background: var(--md-sys-color-surface-container); }
.md-item-row.expanded .md-item-extra {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 0 4px; margin-top: 4px;
  border-top: 1px dashed var(--md-sys-color-outline-variant); }
.md-extra-field { display: flex; flex-direction: column; gap: 4px; }
.md-extra-field > span { font-size: 11px; letter-spacing: .4px;
  color: var(--md-sys-color-on-surface-variant); }
.md-extra-foot { display: flex; align-items: center; gap: 8px; }
.md-extra-foot .spacer { flex: 1; }
.md-item-row textarea { height: auto; min-height: 52px; padding: 8px;
  font-size: 12px; }

.md-items-foot { display: flex; align-items: center; gap: 12px;
  padding: 14px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.md-items-foot .spacer { flex: 1; }

/* reordenar colunas arrastando o cabeçalho */
.md-draggable-head th { cursor: grab; user-select: none; }
.md-draggable-head th:active { cursor: grabbing; }
.md-draggable-head th.dragging { opacity: .45; }
.md-draggable-head th.drop-target {
  box-shadow: inset 3px 0 var(--md-sys-color-primary);
  background: var(--md-sys-color-surface-container-high); }

/* ---------- listas em largura total, colunas redimensionáveis ---------- */
/* .md-shell-main é flex-column; com margin: 0 auto o item é CENTRALIZADO no
   tamanho do conteúdo em vez de esticar. Daí a lista não usava a tela toda. */
main.md-content.full, main.md-content.detail, main.md-content.board {
  max-width: none; margin: 0; width: 100%; align-self: stretch; }
.md-table { table-layout: auto; }
.md-draggable-head th { position: relative; padding-right: 14px; }
/* Divisor visível entre colunas: risco permanente marca ONDE agarrar, e a alça
   engrossa no hover. Sem isso não se descobre que a coluna redimensiona. */
.md-draggable-head th:not(:last-child)::after {
  content: ""; position: absolute; top: 22%; right: 0; width: 1px; height: 56%;
  background: var(--md-sys-color-outline); opacity: .6; pointer-events: none; }
.md-col-resizer { position: absolute; top: 0; right: -3px; width: 9px; height: 100%;
  cursor: col-resize; display: flex; align-items: center; justify-content: center; }
.md-col-resizer::before {
  content: ""; width: 3px; height: 62%; border-radius: 2px;
  background: transparent; transition: background .1s; }
.md-col-resizer:hover::before { background: var(--md-sys-color-primary); }
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing .md-table tbody tr:hover { background: none; }
/* com largura definida, a célula corta em vez de empurrar a tabela */
.md-table th[style*="width"], .md-table td { overflow: hidden; text-overflow: ellipsis; }

/* ---------- cabeçalho ordenável (3 estados: nenhum / asc / desc) ---------- */
.md-th-sort { display: inline-flex; align-items: center; gap: 4px;
  color: inherit; text-decoration: none; }
.md-th-sort:hover { color: var(--md-sys-color-primary); text-decoration: none; }
.md-draggable-head th.num .md-th-sort { justify-content: flex-end; width: 100%; }
.md-sort-ind { font-size: 10px; line-height: 1; }
.md-draggable-head th.sorted { color: var(--md-sys-color-primary); }
.md-draggable-head th.sorted .md-th-sort { color: var(--md-sys-color-primary); }

/* variações do produto */
.md-variation-row { display: flex; gap: 6px; align-items: center; padding: 5px 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.md-variation-row:last-of-type { border-bottom: none; }
.md-variation-row input {
  height: 34px; padding: 0 8px; font: inherit; color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small); min-width: 0; }
.md-variation-row input[name=name] { flex: 2; }
.md-variation-row input[name=price] { flex: 1; text-align: right; }
.md-variation-row input[name=currency] { flex: 0 0 56px; }
.md-variation-new { background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-small); padding: 6px 8px; margin-top: 6px; }

/* cards de resumo (detalhe do produto) */
.md-stats-row { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.md-stat { display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 14px 10px; }
.md-stat-num { font-size: 22px; font-weight: 600; line-height: 1.2; }
.md-stat.open .md-stat-num { color: var(--md-sys-color-on-info-container); }
.md-stat.won .md-stat-num { color: var(--md-sys-color-on-success-container); }
@media (prefers-color-scheme: light) {
  .md-stat.open .md-stat-num { color: #0b57d0; }
  .md-stat.won .md-stat-num { color: #1b6b3a; }
  .md-stat.lost .md-stat-num { color: var(--md-sys-color-error); }
}
@media (prefers-color-scheme: dark) {
  .md-stat.open .md-stat-num { color: #a8c7fa; }
  .md-stat.won .md-stat-num { color: #7fd39b; }
  .md-stat.lost .md-stat-num { color: #f2b8b5; }
}
.md-stat.wide { grid-column: span 2; }
.md-stat.wide .md-stat-num { font-size: 16px; }

/* seletor de moeda base (rodapé do menu lateral) */
.md-nav-currency select { width: 100%; height: 32px; padding: 0 8px;
  font: inherit; font-size: 12px; color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small); }
.nav-collapsed .md-nav-currency { display: none; }

/* valor agregado dentro do card de status */
.md-stat-value { font-size: 12px; font-weight: 600; margin-top: 2px;
  white-space: nowrap; }

/* detalhe de entidade empilhado: cada bloco em largura total */
.md-detail-stack { display: flex; flex-direction: column; gap: 16px; }
/* campos de Detalhes em colunas (a largura total comporta 2–3) */
.md-fields-grid { display: grid; gap: 4px 32px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* ---------- Insights ----------
   Três painéis: definição, filtros e resultado. O resultado é o que precisa de
   espaço, então ocupa a linha inteira embaixo em tela estreita e a coluna maior
   em tela larga — a mesma lição do detalhe do produto (DECISIONS §20). */
/* O RESULTADO é o que precisa de espaço, então leva a largura inteira; definição
   e filtros cabem numa faixa. Em três colunas o gráfico ficava com um terço da
   tela e dois cards ficavam quase vazios. */
.md-insights-stack { display: flex; flex-direction: column; gap: 14px; }
.md-insights-result { min-width: 0; }

.md-insights-bar { display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 12px; padding: 12px 16px; }
.md-insights-bar .md-select { min-width: 150px; }
.md-insights-bar select { height: 34px; font: inherit; font-size: 13px; }
.md-bar-sep { width: 1px; align-self: stretch; margin: 2px 4px;
  background: var(--md-sys-color-outline-variant); }

/* filtros em linha, como a faixa de filtros do Pipedrive */
.md-filters-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  flex: 1 1 320px; min-width: 0; }
.md-filter-list { display: flex; flex-wrap: wrap; gap: 8px; }
/* cada filtro é uma pílula, não uma linha de tabela */
.md-filter-row { display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 8px; border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container); }
.md-filter-row select, .md-filter-row input { height: 28px; font: inherit;
  font-size: 12px; border: none; background: none; min-width: 0;
  color: var(--md-sys-color-on-surface); }
.md-filter-row input { width: 9ch; }
.md-filter-row input:focus, .md-filter-row select:focus {
  outline: 2px solid var(--md-sys-color-primary); border-radius: 4px; }

.md-report-name { font: inherit; font-size: 18px; font-weight: 500;
  border: none; background: none; color: var(--md-sys-color-on-surface);
  padding: 4px 6px; border-radius: var(--md-sys-shape-corner-small);
  min-width: 220px; }
.md-report-name:hover { background: var(--md-sys-color-surface-container); }
.md-report-name:focus { outline: 2px solid var(--md-sys-color-primary); }

.md-filter-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.md-filter-row select, .md-filter-row input { height: 34px; font: inherit;
  font-size: 13px; min-width: 0; flex: 1 1 90px; }

/* o gráfico é montado pela biblioteca vendorizada; aqui só se reserva a caixa */
.md-chart { min-height: 320px; }
.md-chart svg { max-width: 100%; }
/* o número único é a leitura mais rápida do relatório: tem que dominar o card */
.md-scorecard { font-size: 40px; font-weight: 600; letter-spacing: -.5px;
  font-family: var(--md-ref-typeface-mono); padding: 8px 0;
  color: var(--md-sys-color-on-surface); }

/* ---------- controles do gráfico ----------
   Verificado no DOM do Pipedrive: os controles SÃO os rótulos dos eixos.
   segment by acima, view by rotacionado -90° à esquerda (eixo das categorias),
   measure by abaixo (eixo dos valores). Cada um é botão de texto, não caixa. */
.md-chart-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.md-chart-head .spacer { flex: 1 1 20px; }

.md-axis-ctl { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.md-axis-ctl.seg { padding: 6px 0 2px; }
.md-axis-ctl.measure { justify-content: center; width: 100%; padding: 2px 0 6px; }
/* writing-mode + rotate(180deg) é o equivalente moderno do matrix(0,-1,1,0) que o
   Pipedrive usa: a faixa fica vertical e o texto lê de baixo para cima. */
.md-axis-ctl.view { writing-mode: vertical-rl; transform: rotate(180deg);
  align-self: center; padding: 0 2px; }

.md-axis-label { white-space: nowrap; }
/* select com cara de botão de texto: no Pipedrive é <button>, mas manter o
   select nativo dá teclado, leitor de tela e envio de form de graça. */
.md-axis-ctl select, .md-chart-controls select {
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--md-sys-color-on-surface);
  background: none; border: none; padding: 4px 6px;
  border-radius: var(--md-sys-shape-corner-small); cursor: pointer;
  max-width: 220px; }
.md-axis-ctl select:hover { background: var(--md-sys-color-surface-container-high); }
.md-axis-ctl select:focus-visible { outline: 2px solid var(--md-sys-color-primary); }

/* o quadro do gráfico: faixa vertical + área de desenho */
.md-chart-frame { display: flex; align-items: stretch; gap: 4px; min-width: 0; }
/* table/scorecard draw below/above, not in the canvas: no 320px dead space.
   The vertical view-by rail is what held the height (its writing-mode content
   is ~300px tall by nature), so it lies back down into a normal control row. */
.md-chart-frame.no-canvas .md-chart { min-height: 0; }
.md-chart-frame.no-canvas .md-axis-ctl.view {
  writing-mode: horizontal-tb; transform: none; align-self: flex-start; }
.md-chart-frame .md-chart { flex: 1; min-width: 0; }

/* formato do gráfico: chips de rádio, um só selecionado */
.md-chart-types { display: inline-flex; flex-wrap: wrap; gap: 4px;
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden; }
.md-chart-type { display: inline-flex; }
.md-chart-type input { position: absolute; opacity: 0; pointer-events: none; }
.md-chart-type span { display: inline-flex; align-items: center; height: 32px;
  padding: 0 12px; font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--md-sys-color-on-surface); }
.md-chart-type span:hover { background: var(--md-sys-color-surface-container-high); }
.md-chart-type input:checked + span {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container); }
/* foco visível pelo teclado: o input é invisível, então o anel vai no rótulo */
.md-chart-type input:focus-visible + span { outline: 2px solid var(--md-sys-color-primary); }

/* ---------- grade do dashboard ----------
   12 colunas, como a react-grid-layout do Pipedrive. A geometria de cada widget
   vem do servidor em UNIDADES DE GRADE (--w/--h), não em pixels: guardar pixel
   amarraria o dashboard à tela de quem arrastou o widget. */
.md-dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px;
  margin-top: 12px; align-items: start; }
.md-dash-widget { grid-column: span var(--w, 6);
  min-height: calc(var(--h, 4) * 80px);
  display: flex; flex-direction: column; position: relative;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium); padding: 12px 14px; }
@media (max-width: 900px) {
  /* em tela estreita a grade some: um widget por linha lê melhor que doze
     colunas de 30px */
  .md-dash-widget { grid-column: 1 / -1; }
}
.md-dash-widget > header { display: flex; align-items: center; gap: 8px; }
.md-dash-widget > header .spacer { flex: 1; }
.md-dash-grid.editable .md-dash-widget > header { cursor: grab; }
.md-dash-widget.dragging { opacity: .5; outline: 2px dashed var(--md-sys-color-primary); }
.md-dash-widget .md-chart { flex: 1; min-height: 160px; }
.md-dash-widget .md-scorecard { font-size: 32px; }

/* alça de redimensionar no canto, como a da grade do Pipedrive */
.md-dash-resize { position: absolute; right: 2px; bottom: 2px;
  width: 16px; height: 16px; cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 45%, var(--md-sys-color-outline) 45%,
                    var(--md-sys-color-outline) 55%, transparent 55%); }

/* o ✕ do widget é ação secundária: não deve competir com o título */
.md-dash-widget .md-icon-button { width: 28px; height: 28px; flex: 0 0 28px;
  font-size: 14px; }
.md-dash-widget > header form { display: flex; }

.md-dash-share { margin-top: 12px; padding: 12px 16px; }
.md-dash-share > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.md-share-list { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0; }
.md-share-list .md-colopt { flex: 0 0 auto; }

/* ---------- metas ---------- */
.md-goal-list { display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.md-goal { padding: 14px 16px; }
.md-goal > header { display: flex; align-items: center; gap: 8px; }
.md-goal > header .spacer { flex: 1; }
.md-goal-value { font-size: 26px; font-weight: 600; padding: 6px 0;
  font-family: var(--md-ref-typeface-mono); }
/* a barra só aparece quando existe alvo — barra sem alvo é decoração */
.md-goal-bar { height: 8px; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high); overflow: hidden; }
.md-goal-bar > span { display: block; height: 100%;
  background: var(--md-sys-color-success-container); }

/* ---------- painel local do Insights ----------
   A segunda barra, dentro da seção, como no Pipedrive: criar, buscar, e três
   seções colapsáveis com os relatórios agrupados em pastas. É <details>, então
   colapsa sem JavaScript. */
main.md-ins-layout { display: flex; gap: 16px; align-items: flex-start; }
.md-ins-main { flex: 1; min-width: 0; }

.md-ins-panel { flex: 0 0 240px; align-self: stretch;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 12px; position: sticky; top: 12px;
  max-height: calc(100dvh - 24px); overflow-y: auto; }
@media (max-width: 900px) {
  /* em tela estreita o painel vira uma faixa acima: 240px de coluna não sobram */
  main.md-ins-layout { flex-direction: column; }
  .md-ins-panel { flex: 1 1 auto; width: 100%; position: static; max-height: none; }
}

.md-ins-panel-top { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.md-ins-create { position: relative; }
.md-ins-create > summary { list-style: none; cursor: pointer; text-align: center; }
.md-ins-create > summary::-webkit-details-marker { display: none; }
.md-ins-create .md-menu { top: 44px; left: 0; right: auto; min-width: 200px; }
.md-ins-create .md-menu a,
.md-ins-create .md-menu button { display: block; width: 100%; text-align: left;
  padding: 10px 16px; border: none; background: none; cursor: pointer;
  font: inherit; color: var(--md-sys-color-on-surface); }
.md-ins-create .md-menu a:hover,
.md-ins-create .md-menu button:hover { background: var(--md-sys-color-surface-container); }

.md-ins-search { height: 34px; font: inherit; font-size: 13px; padding: 0 10px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface); }

.md-ins-section { margin-bottom: 6px; }
.md-ins-section > summary,
.md-ins-group > summary { display: flex; align-items: center; gap: 6px;
  cursor: pointer; padding: 6px 2px; list-style: none; }
.md-ins-section > summary::-webkit-details-marker,
.md-ins-group > summary::-webkit-details-marker { display: none; }
.md-ins-section > summary svg { width: 16px; height: 16px; fill: currentColor;
  color: var(--md-sys-color-on-surface-variant); }
/* MAIÚSCULA no título da seção, como no Pipedrive: separa seção de item sem
   precisar de linha divisória */
.md-ins-section-name { font-size: 11px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }
.md-ins-group > summary { font-size: 12px; font-weight: 500;
  color: var(--md-sys-color-on-surface-variant); padding-left: 6px; }
.md-ins-count { margin-left: auto; font-size: 11px;
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-full); padding: 1px 7px; }

.md-ins-items { display: flex; flex-direction: column; }
.md-ins-item { display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: var(--md-sys-shape-corner-small);
  font-size: 13px; color: var(--md-sys-color-on-surface);
  text-decoration: none; }
.md-ins-item svg { width: 15px; height: 15px; flex: 0 0 15px; fill: currentColor;
  color: var(--md-sys-color-on-surface-variant); }
.md-ins-item > span:not([class]) { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.md-ins-item:hover { background: var(--md-sys-color-surface-container); }
.md-ins-item.active { background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container); font-weight: 500; }
.md-ins-item.active svg { color: inherit; }
.md-ins-shared { margin-left: auto; display: inline-flex; }
.md-ins-shared svg { width: 13px; height: 13px; }
.md-ins-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 999px;
  background: var(--md-sys-color-outline); }
.md-ins-empty { padding: 4px 8px; }
.md-ins-group { padding-left: 4px; }
.md-ins-x { border: none; background: none; cursor: pointer; font-size: 11px;
  color: var(--md-sys-color-on-surface-variant); padding: 0 4px; }
.md-ins-x:hover { color: var(--md-sys-color-error); }
/* a busca esconde grupo e seção que ficaram sem item */
.filtered-out { display: none; }

/* ---------- busca geral (barra do topo) ----------
   Centralizada no alto da área de conteúdo, como no Pipedrive. O painel abre
   embaixo com duas colunas: categorias à esquerda, resultados à direita. */
/* A faixa é sticky, e uma linha fina embaixo é o que deixa isso claro: sem ela o
   conteúdo parece passar por baixo de nada. */
.md-searchbar { display: flex; justify-content: center; padding: 10px 20px;
  position: sticky; top: 0; z-index: 20;
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.md-search { position: relative; width: 100%; max-width: 560px; }
.md-search input {
  width: 100%; height: 40px; padding: 0 36px; font: inherit; font-size: 14px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface); }
.md-search input:focus { outline: none; border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 1px var(--md-sys-color-primary); }
/* o search nativo do WebKit desenha um X próprio, que duplicaria o nosso */
.md-search input::-webkit-search-cancel-button { display: none; }
.md-search-icon { position: absolute; left: 11px; top: 11px; pointer-events: none; }
.md-search-icon svg { width: 18px; height: 18px; fill: var(--md-sys-color-on-surface-variant); }
.md-search-clear { position: absolute; right: 10px; top: 8px; width: 24px; height: 24px;
  border: none; background: none; cursor: pointer; font-size: 13px;
  color: var(--md-sys-color-on-surface-variant); }

.md-search-panel { position: absolute; top: 46px; left: 0; right: 0;
  display: flex; flex-wrap: wrap; min-height: 120px; max-height: 70vh; overflow: hidden;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-2); z-index: 30; }
/* o painel é mais largo que o campo, como no Pipedrive: resultado com subtítulo
   não cabe na largura de uma caixa de texto */
@media (min-width: 720px) {
  .md-search-panel { left: -120px; right: -220px; }
}

.md-search-cats { flex: 0 0 170px; display: flex; flex-direction: column;
  gap: 2px; padding: 8px; overflow-y: auto;
  background: var(--md-sys-color-surface-container); }
.md-search-cats button { text-align: left; border: none; background: none;
  cursor: pointer; font: inherit; font-size: 13px; padding: 8px 10px;
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-on-surface); }
.md-search-cats button:hover { background: var(--md-sys-color-surface-container-high); }
.md-search-cats button.active { background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container); font-weight: 500; }

.md-search-results { flex: 1; min-width: 0; overflow-y: auto; padding: 8px; }
.md-search-head { margin: 4px 6px 8px; font-size: 12px; font-weight: 500;
  color: var(--md-sys-color-on-surface-variant); }
.md-search-empty { margin: 8px; font-size: 13px;
  color: var(--md-sys-color-on-surface-variant); }
.md-search-item { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; background: none; cursor: pointer;
  text-align: left; font: inherit; text-decoration: none;
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-on-surface); }
.md-search-item:hover, .md-search-item.cursor {
  background: var(--md-sys-color-surface-container); }
.md-search-avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 30px; font-size: 11px; font-weight: 600;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container); }
.md-search-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.md-search-title { font-size: 14px; font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.md-search-sub { font-size: 12px; color: var(--md-sys-color-on-surface-variant);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-search-kind { font-size: 11px; color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap; }
/* o destaque do termo: amarelo, como no Pipedrive */
.md-search-item mark { background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container); border-radius: 2px; }
/* ícone da categoria, ao lado do rótulo */
.md-search-cats button { display: flex; align-items: center; gap: 8px; }
.md-search-cats button svg { width: 15px; height: 15px; flex: 0 0 15px;
  fill: currentColor; opacity: .75; }

/* a conversão do lead fica no topo: é a ação que existe para ser feita */
.md-lead-convert { padding: 12px 16px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.md-lead-convert .md-select { min-width: 200px; }
.md-lead-convert select { height: 36px; font: inherit; font-size: 13px; }

/* ---------- gestão de usuário: grade de permissões e duas colunas ----------
   A grade de flags tem 48 itens: em coluna única viraria rolagem infinita, e em
   tabela o nome da flag (que é código, não texto) ficaria comprimido. auto-fill
   com mínimo de 260px dá 2 a 4 colunas conforme a tela, sem media query. */
.md-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px 14px;
  margin-top: 10px;
}
.md-perm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--md-sys-color-outline-variant);
  font-size: 13px;
}
.md-perm-item.on {
  background: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary);
}
.md-perm-item code { font-size: 12px; }
.md-perm-item input[type="checkbox"] { height: auto; margin: 0; }
.md-perm-mark {
  width: 14px;
  text-align: center;
  color: var(--md-sys-color-primary);
}
/* duas colunas com a lista à esquerda: o mesmo arranjo do painel do Insights,
   que já é o vocabulário do produto para "escolha um item e edite-o" */
.md-two-col {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}
.md-two-col > section { flex: 1 1 320px; }

/* separador "ou" entre os dois caminhos de login (IdP e token) */
.md-login-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
}
.md-login-sep::before, .md-login-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--md-sys-color-outline-variant);
}

/* Lista de escolha das telas de gestão (conjuntos, grupos, times).
   Eu havia usado .md-panel-list/.md-panel-item achando que existiam do painel do
   Insights — não existem: lá as classes são .md-ins-*. O resultado foi lista com
   marcador de bala e item sem estado de seleção. Estas regras são as que faltavam. */
.md-pick-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 2px; }
.md-pick-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: 8px; text-decoration: none;
  color: var(--md-sys-color-on-surface); font-size: 14px;
}
.md-pick-item:hover { background: var(--md-sys-color-surface-container); }
.md-pick-item.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 500;
}
.md-pick-item .md-body-small { opacity: .75; white-space: nowrap; }
/* a coluna de escolha é estreita e a de edição é a que precisa de espaço */
.md-two-col > section:first-child { flex: 0 1 280px; }
.md-two-col > section:last-child { flex: 3 1 480px; }

/* Campos DENTRO de .md-field-row (as telas de gestão editam em formulário, não com
   click-to-edit). Sem isto o navegador desenhava o select cru: canto reto, altura
   diferente, esticado até a borda do card — e a tela não parecia do mesmo produto.
   As medidas são as do .md-select, que é o vocabulário de campo já existente. */
.md-field-row > input, .md-field-row > select,
.md-field-row input:not([type="checkbox"]):not([type="radio"]), .md-field-row select {
  height: 38px; max-width: 320px; padding: 0 10px; font: inherit;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
}
.md-field-row input:focus, .md-field-row select:focus {
  outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px;
}
/* a fileira de ações não mistura "adicionar membro" com "apagar o grupo": o
   destrutivo vai para a direita, separado pelo espaçador */
.md-danger-row { display: flex; align-items: center; gap: 10px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--md-sys-color-outline-variant); }

/* o chip de "inerte" não quebra: ele fica ao lado do nome da flag, e quebrar
   empurrava a caixa para três linhas de altura */
.md-perm-item .md-chip {
  white-space: nowrap; font-size: 10px; padding: 1px 6px; flex: 0 0 auto;
  margin-left: auto;
}
.md-perm-item { flex-wrap: nowrap; overflow: hidden; }
.md-perm-item code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* o app de cada flag em fonte menor: é contexto, não o nome da coisa */
.md-perm-item > .md-body-small { flex: 0 0 auto; opacity: .6; font-size: 11px; }

/* barras horizontais (od-charts.js: odBars) — o tipo "Bars" do Pipedrive */
.md-bars { display: block; }
.md-bars-grid { stroke: var(--md-sys-color-outline-variant); stroke-width: 1; }
.md-bars-tick, .md-bars-label, .md-bars-total {
  font-size: 11px; fill: var(--md-sys-color-on-surface-variant);
}
.md-bars-label { font-size: 12px; fill: var(--md-sys-color-on-surface); }
.md-bars-total { font-size: 11px; font-variant-numeric: tabular-nums; }
.md-bars-rect { rx: 2; }
.md-bars-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;
  font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.md-bars-key { display: inline-flex; align-items: center; gap: 6px; }
.md-bars-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* L13: coluna de seleção e a barra de ações da seleção */
.md-sel-col { width: 34px; text-align: center; }
.md-sel-col input { height: auto; margin: 0; }
.md-selbar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  margin-top: 12px; padding: 12px 16px;
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}
.md-selbar-form { display: flex; align-items: flex-end; gap: 8px; }
.md-selbar .md-select { min-width: 120px; }
/* ação que exige outra quantidade de linhas fica visível e apagada: esconder faria
   a barra dançar a cada clique */
.md-selbar-form.md-disabled { opacity: .45; }

/* sub-navegação: mesma família do segmented, meio tom abaixo. Duas fileiras
   idênticas empilhadas (abas de settings + abas de entidade) não deixavam claro qual
   é o nível de cima. */
.md-segmented.md-subnav .md-segment { padding: 6px 14px; font-size: 13px; font-weight: 400; }
.md-segmented.md-subnav { border-color: var(--md-sys-color-outline-variant); }
.md-segmented.md-subnav .md-segment.selected { font-weight: 500; }

/* L19: construtor de filtro (uma condição por linha, como no Pipedrive) */
.md-fb { padding: 12px 16px; margin-bottom: 16px; }
/* CENTER, não flex-end: o "Filtros" não tem legenda e o seletor de filtro salvo tem,
   e alinhar pela base deixava o título caído — o mesmo defeito que eu tinha acabado de
   corrigir na barra de ação e reintroduzi aqui. E teto de largura no seletor: ele
   esticava até ~500px, maior que qualquer controle da tela. */
.md-fb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.md-fb-head .md-select { max-width: 240px; }
.md-fb-head .md-select > span { font-size: 11px; }
.md-fb-rows { display: flex; flex-direction: column; gap: 8px; }
.md-fb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.md-fb-row select, .md-fb-row input {
  height: 36px; padding: 0 10px; font: inherit;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
}
.md-fb-row .fb-field { min-width: 180px; max-width: 240px; }
.md-fb-row .fb-op { min-width: 150px; max-width: 200px; }
.md-fb-row .fb-value { flex: 1; min-width: 160px; max-width: 320px; }
.md-fb-row .fb-drop { background: none; border: none; color: var(--md-sys-color-error);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 8px; }
.md-fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 10px; }
.md-fb-glue select { height: 32px; font-size: 13px; border-radius: 16px;
  border: 1px solid var(--md-sys-color-outline-variant); padding: 0 8px; }
.md-fb-name { height: 36px; padding: 0 10px; min-width: 180px; font: inherit;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small); }

/* ---------- analista de IA na busca (IA2) ----------
   A seção vive DENTRO do painel de busca e usa os mesmos tokens do resto:
   separador outline-variant, títulos label-small como as categorias, tabela
   com o zebra dos relatórios. Nada de cor nova — consistência antes de tudo. */
/* A seção ocupa a LINHA INTEIRA na base do modal (pedido do Gallo, 05/08):
   o painel é flex em linha (categorias | resultados) e sem o flex-basis:100%
   ela virava uma terceira coluna espremida à direita. */
.md-search-ai { flex: 1 1 100%; order: 10; min-width: 100%;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  padding: 10px 14px 12px; }
.md-search-ai > h3 { margin: 0 0 6px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant); font-size: 11px; }
.md-search-ai-wait { color: var(--md-sys-color-on-surface-variant);
  font-size: 13px; margin: 4px 0; animation: od-ai-pulse 1.2s ease-in-out infinite; }
@keyframes od-ai-pulse { 50% { opacity: .45; } }
.md-search-ai-body { font-size: 13px; color: var(--md-sys-color-on-surface);
  max-height: 320px; overflow-y: auto; }
.md-search-ai-body p { margin: 4px 0; }
.md-search-ai-body h4 { margin: 8px 0 4px; font-size: 13px; }
.md-search-ai-body ul { margin: 4px 0; padding-left: 18px; }
.md-search-ai-body code { background: var(--md-sys-color-surface-container-high);
  border-radius: 4px; padding: 0 4px; }
.md-ai-table { border-collapse: collapse; margin: 6px 0; width: 100%; }
.md-ai-table td { border-bottom: 1px solid var(--md-sys-color-outline-variant);
  padding: 3px 8px 3px 0; }
.md-ai-table tr:first-child td { font-weight: 600;
  color: var(--md-sys-color-on-surface-variant); }

/* Páginas do analista (L25) — UX de chat canônica: uma COLUNA CENTRAL de
   leitura (~860px); a resposta do assistente usa a largura toda da coluna,
   sem balão (balão de 72ch usava metade do painel — reclamação justa); a
   pergunta é bolha compacta alinhada à direita. */
.md-ai-thread { display: flex; flex-direction: column; gap: 12px; }
.md-ai-msg { width: 100%; max-width: 860px; margin: 0 auto; }
.md-ai-msg.assistant { padding: 2px 0; }
.md-ai-msg.user { display: flex; justify-content: flex-end; }
.md-ai-msg.user p { background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  padding: 8px 14px; border-radius: var(--md-sys-shape-corner-large);
  max-width: 75%; margin: 0; }
.md-ai-msg p { margin: 4px 0; }
.md-ai-sql { background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-small); padding: 10px 12px;
  overflow-x: auto; font-size: 12.5px; }
/* big fenced code folds closed (Claude Code-like); the summary is a chip */
.md-ai-code > summary { cursor: pointer; display: inline-block;
  font-family: ui-monospace, monospace; font-size: 12px;
  padding: 3px 10px; border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-high);
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant); }
.md-ai-code[open] > summary { margin-bottom: 6px; }

/* sandbox chart (L30): a card-like image inside the bubble/artifact */
.md-ai-chart { display: block; max-width: 100%; margin: 8px 0;
  border-radius: var(--md-sys-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: #fff; }

.md-ai-convs { display: flex; flex-direction: column; gap: 2px; padding: 0 6px; }
.md-ai-convs .md-chip { margin-left: auto; }

/* lixeira do painel: aparece no hover da linha, como ações de lista */
.md-ai-conv-row { display: flex; align-items: center; gap: 2px; }
.md-ai-conv-row > a { flex: 1; min-width: 0; }
.md-ai-conv-row form { flex: 0 0 auto; }
.md-ai-conv-row .md-icon-button { opacity: 0; }
.md-ai-conv-row:hover .md-icon-button,
.md-ai-conv-row .md-icon-button:focus-visible { opacity: 1; }
/* o título-editável PARECE título; a borda só existe no foco */
.md-ai-title { width: 100%; border: none; background: none; font-family: inherit;
  color: inherit; padding: 2px 4px; margin-left: -4px;
  border-radius: var(--md-sys-shape-corner-small); }
.md-ai-title:hover { background: var(--md-sys-color-surface-container-low); }
.md-ai-title:focus { outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px;
  background: var(--md-sys-color-surface-container-lowest); }

/* Interface de chat (pedido do Gallo, 05/08): a PÁGINA nunca rola — as telas
   do analista prendem a altura na janela e cada coluna rola POR DENTRO
   (painel de conversas à esquerda, thread à direita), como qualquer chat. */
main.md-ai-layout { height: calc(100vh - 76px); overflow: hidden;
  align-items: stretch; }
main.md-ai-layout .md-ins-panel { display: flex; flex-direction: column;
  height: 100%; min-height: 0; overflow: hidden; }
main.md-ai-layout .md-ins-panel-body { flex: 1 1 auto; min-height: 0;
  overflow-y: auto; }
main.md-ai-layout .md-ins-main { height: 100%; min-height: 0;
  overflow-y: auto; }

/* Narrow screens: the 900px rule stacks the layout in a column, but this
   layout pins the viewport height — with height:100% the conversations panel
   swallowed it all and the CHAT was clipped invisible (Gallo's phone, 07/08).
   The panel becomes a short strip with its own scroll; the chat gets the rest. */
@media (max-width: 900px) {
  main.md-ai-layout .md-ins-panel { flex: 0 1 auto; height: auto; max-height: 26vh; }
  main.md-ai-layout .md-ins-main { flex: 1 1 auto; height: auto; }
}

/* chat: dentro da coluna, o thread rola e o composer fica embaixo */
.md-ai-chat { display: flex; flex-direction: column; min-height: 0; }
/* a coluna do CHAT não rola (o thread rola); vence o overflow-y:auto genérico
   do md-ins-main por especificidade, não por !important — o único !important
   do projeto continua sendo o do [hidden] */
main.md-ai-layout .md-ins-main.md-ai-chat { overflow: hidden; }
.md-ai-chat .md-ai-title { flex: 0 0 auto; }
.md-ai-chat .md-ai-thread { flex: 1 1 auto; overflow-y: auto; min-height: 0;
  margin-top: 10px; }
.md-ai-chat .md-ai-composer { flex: 0 0 auto; margin-top: 10px; }
/* dentro do chat quem rola é a CONVERSA, nunca o balão: o max-height de
   .md-search-ai-body é do painel de busca, onde o espaço é curto */
.md-ai-thread .md-search-ai-body { max-height: none; overflow: visible; }

/* "converter em artefato": gatilho discreto na margem da resposta, visível no
   hover; o form abre no MODAL padrão do app (dlg-ai-artifact) */
.md-ai-save-btn { opacity: 0; margin-top: 4px; }
.md-ai-msg.assistant:hover .md-ai-save-btn,
.md-ai-save-btn:focus-visible { opacity: 1; }
#dlg-ai-artifact .md-ai-sql { margin-top: 12px; max-height: 180px; overflow: auto; }

/* proposta de escrita (L27): cartão destacado no thread, ações à direita */
.md-ai-proposal { padding: 14px 16px;
  border: 1px solid var(--md-sys-color-outline-variant); }
.md-ai-proposal ul { margin: 8px 0 0; padding-left: 4px; list-style: none; }
.md-ai-proposal li { margin: 4px 0; }
.md-ai-proposal .md-dialog-actions form { display: inline; }
.md-ai-proposal-done { color: var(--md-sys-color-on-surface-variant); }

.md-fb-note { color: var(--md-sys-color-on-surface-variant); margin: 0 0 8px; }

/* ---------- Mail tab (C1) ---------- */
.md-mail-list { display: flex; flex-direction: column; }
.md-mail-row { display: grid; grid-template-columns: 180px minmax(120px, max-content) 1fr 32px 84px;
  gap: 12px; align-items: center; padding: 10px 12px; text-decoration: none;
  color: var(--md-sys-color-on-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.md-mail-row:hover { background: var(--md-sys-color-surface-container-high); }
.md-mail-row.unread .md-mail-who, .md-mail-row.unread .md-mail-subject { font-weight: 700; }
.md-mail-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-mail-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-mail-snippet { color: var(--md-sys-color-on-surface-variant);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-mail-time { text-align: right; color: var(--md-sys-color-on-surface-variant); }
.md-mail-count { text-align: center; color: var(--md-sys-color-on-surface-variant); }

.md-mail-msg { max-width: 72ch; margin: 10px 0; padding: 10px 14px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-high); }
.md-mail-msg.out { margin-left: auto; background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container); }
.md-mail-msghead { margin-bottom: 6px; opacity: .85; }
.md-mail-body { overflow-wrap: anywhere; }
.md-mail-plain { white-space: pre-wrap; font: inherit; margin: 0; }
.md-mail-frame { width: 100%; border: 0; height: 120px; background: #fff;
  border-radius: var(--md-sys-shape-corner-small); }

/* rich reply composer */
.md-mail-composer form { display: flex; flex-direction: column; gap: 8px; }
.md-mail-toolbar { display: flex; gap: 2px; align-items: center; }
.md-mail-toolbar button { border: 0; background: none; cursor: pointer;
  min-width: 30px; height: 28px; padding: 0 7px; font-size: 13px;
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-on-surface-variant); }
.md-mail-toolbar button:hover { background: var(--md-sys-color-surface-container-high); }
.md-mail-editor { min-height: 84px; max-height: 40vh; overflow-y: auto;
  padding: 10px 12px; border-radius: var(--md-sys-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface); outline: none; }
.md-mail-editor:focus { border-color: var(--md-sys-color-primary); }
.md-mail-editor:empty::before { content: attr(data-placeholder);
  color: var(--md-sys-color-on-surface-variant); pointer-events: none; }
.md-mail-sendrow { display: flex; justify-content: flex-end; }

/* mail uses the full width — mail is not a chat of bubbles */
.md-mail-msg { max-width: none; width: auto; margin: 10px 0; }
.md-mail-msg.out { margin-left: 0; background: var(--md-sys-color-surface-container-high);
  color: inherit; border-left: 3px solid var(--md-sys-color-primary); }
.md-mail-atts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.md-mail-actions { display: flex; gap: 10px; margin-top: 10px; }
.md-mail-sendrow { display: flex; align-items: center; gap: 8px; }
.md-mail-sendrow .spacer { flex: 1; }

/* the mail thread page: single full-width column (no side panel), the chat
   skeleton (scrolling thread + pinned composer) kept via md-ai-chat */
main.md-mail-page { height: calc(100vh - 76px); overflow: hidden; display: flex; }
main.md-mail-page .md-ai-chat { flex: 1; min-width: 0; max-width: 1200px; margin: 0 auto; }

/* ---------- Mail: real client look ---------- */
main.md-mail-layout { display: flex; gap: 14px; align-items: stretch;
  height: calc(100vh - 76px); overflow: hidden; }
.md-mail-rail { flex: 0 0 200px; display: flex; flex-direction: column;
  padding: 10px 8px; }
.md-mail-folders { display: flex; flex-direction: column; gap: 2px; }
.md-mail-folder { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 999px; text-decoration: none; color: var(--md-sys-color-on-surface);
  font-size: 14px; }
.md-mail-folder svg { width: 18px; height: 18px; fill: currentColor; opacity: .75; }
.md-mail-folder:hover { background: var(--md-sys-color-surface-container-high); }
.md-mail-folder.active { background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container); font-weight: 600; }
.md-mail-unreadcount { margin-left: auto; font-size: 12px; font-weight: 700; }
.md-mail-railfoot { margin-top: auto; }
.md-mail-listpane { flex: 1; min-width: 0; overflow-y: auto; padding: 0; }
.md-mail-onboard { padding: 24px; display: flex; flex-direction: column;
  gap: 10px; align-items: flex-start; }

.md-mail-row { display: grid; grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px;
  padding: 10px 16px; text-decoration: none; color: var(--md-sys-color-on-surface);
  border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.md-mail-row:hover { background: var(--md-sys-color-surface-container-high); }
.md-mail-avatar { grid-row: 1 / span 2; width: 40px; height: 40px;
  /* the base .md-avatar sets flex-basis 24px; without matching it here a flex
     row squeezes the circle into a 24x40 oval (Gallo's screenshot, 08/08) */
  flex: 0 0 40px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container); font-weight: 600; font-size: 14px; }
.md-mail-line1 { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.md-mail-line2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.md-mail-who { font-size: 14px; }
.md-mail-row.unread .md-mail-who, .md-mail-row.unread .md-mail-subject { font-weight: 700; }
.md-mail-row.unread::before { content: ""; position: absolute; }
.md-mail-time { margin-left: auto; white-space: nowrap;
  color: var(--md-sys-color-on-surface-variant); }
.md-mail-subjectsnip { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.md-mail-snippet { color: var(--md-sys-color-on-surface-variant); }

/* thread page */
main.md-mail-page { height: calc(100vh - 76px); overflow: hidden; display: flex; }
.md-mail-threadcol { flex: 1; min-width: 0; max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; }
.md-mail-threadbar { display: flex; align-items: center; gap: 10px; padding: 6px 2px 12px; }
.md-mail-subjecthead { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-mail-scroll { flex: 1; overflow-y: auto; padding: 2px 2px 20px; }
.md-mail-card { padding: 14px 18px; margin-bottom: 12px; }
.md-mail-card.out { border-left: 3px solid var(--md-sys-color-primary); }
.md-mail-cardhead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.md-mail-fromcol { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.md-mail-addr { color: var(--md-sys-color-on-surface-variant); }
.md-mail-cardtime { margin-left: auto; white-space: nowrap;
  color: var(--md-sys-color-on-surface-variant); }
.md-mail-attchip { display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--md-sys-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant); text-decoration: none;
  color: var(--md-sys-color-on-surface); }
.md-mail-attchip:hover { background: var(--md-sys-color-surface-container-high); }
.md-mail-attname { font-size: 13px; font-weight: 500; }
.md-mail-composer { padding: 12px 16px; margin-top: 4px; }
.md-mail-rcptline { display: flex; align-items: center; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.md-mail-rcptinput { flex: 1; border: 0; background: none; font: inherit;
  color: var(--md-sys-color-on-surface); outline: none; padding: 4px; }
/* L47 (Gallo, 08/08): the attachment block and its companion note use the
   card's FULL width — the old 560px cap left half the panel blank */
.md-mail-attblock { display: flex; flex-direction: column; gap: 4px; }
.md-mail-attsum { margin: 0; padding: 6px 10px; border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant); }
.md-mail-composebtn { margin: 2px 4px 12px; }

/* ── L43: left panels are resizable COLUMNS, not floating cards ─────────────
   The aside spans the layout's height, separated by a single hairline; width
   comes from --od-panel-w (default per panel), dragged via the grip that
   od-panel.js appends and persisted per user. Late in the file on purpose:
   these override the earlier card-styled rules at equal specificity. */
main.md-ins-layout, main.md-mail-layout { padding: 0; gap: 0; }
main.md-ins-layout > .md-ins-main { padding: var(--od-pad-content); }
main.md-mail-layout > .md-mail-listpane { margin: var(--od-pad-content); flex: 1; min-width: 0; }
.md-ins-panel, .md-mail-rail {
  border: 0; border-right: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0;
  background: var(--md-sys-color-surface-container-lowest);
}
.md-ins-panel { flex: 0 0 var(--od-panel-w, 240px); top: 0; max-height: 100dvh; }
.md-mail-rail { flex: 0 0 var(--od-panel-w, 200px); position: relative; }
.od-panel-grip { position: absolute; top: 0; right: 0; width: 6px; height: 100%;
  cursor: col-resize; z-index: 5; }
.od-panel-grip:hover, .od-panel-grip.on {
  background: color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent); }
@media (max-width: 900px) {
  .od-panel-grip { display: none; } /* narrow screens stack; width is moot */
  main.md-ins-layout, main.md-mail-layout { padding: var(--od-pad-content); }
}
.md-kanban-weighted { color: var(--md-sys-color-on-surface-variant); font-size: 11px; }

/* L34: compact filter cluster in the list header */
.md-listsearch input { height: 34px; width: 220px; padding: 0 12px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: 999px;
  background: var(--md-sys-color-surface-container-lowest); font: inherit; font-size: 13px; }
.md-listsearch input:focus { outline: 2px solid var(--md-sys-color-primary); outline-offset: -1px; }
.md-filterpanel { display: flex; flex-direction: column; gap: 10px; min-width: 240px; padding: 12px; }
.md-filterpanel-row { display: flex; align-items: center; gap: 8px; }
.od-filter-on { color: var(--md-sys-color-primary); position: relative; }
.od-filter-on::after { content: ""; position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--md-sys-color-primary); }
.md-dialog-wide { width: min(860px, 92vw); }
.md-dialog-wide .md-fb { border: 0; }
.md-select-inline select { height: 34px; border-radius: 8px; font-size: 13px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest); padding: 0 8px; }


/* L44: recipient chips + contact autocomplete in the mail composer */
.od-rcpt { position: relative; display: flex; flex-wrap: wrap; gap: 4px; flex: 1;
  align-items: center; min-height: 32px; padding: 2px 4px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.od-rcpt-editor { flex: 1; min-width: 140px; border: 0; outline: 0; font: inherit;
  font-size: 13px; background: transparent; padding: 4px; }
.od-rcpt-chip { display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 10px; border-radius: 999px; font-size: 12px;
  background: var(--md-sys-color-surface-container); }
.od-rcpt-chip.known { background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container); }
.od-rcpt-x { border: 0; background: none; cursor: pointer; font-size: 14px;
  line-height: 1; padding: 2px 4px; color: inherit; opacity: .6; }
.od-rcpt-x:hover { opacity: 1; }
.od-rcpt-drop { position: absolute; top: 100%; left: 0; z-index: 40;
  display: flex; flex-direction: column; min-width: 320px; max-height: 240px;
  overflow-y: auto; background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0 0 10px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.od-rcpt-hit { display: block; text-align: left; border: 0; background: none;
  padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.od-rcpt-hit:hover { background: var(--md-sys-color-surface-container); }
.od-rcpt-hit span { color: var(--md-sys-color-on-surface-variant); }

/* L46: mail settings shaped like the other settings pages */
.od-settings-w { max-width: 860px; }
.od-mailset-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.od-mailset-form .md-field { flex: 1 1 180px; }
.od-mailset-form .od-w-sm { flex: 0 1 110px; }
.od-mailset-opts { flex: 1 1 100%; display: flex; align-items: center; gap: 18px; }
.od-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.od-check input { width: 18px; height: 18px; accent-color: var(--md-sys-color-primary); }

/* L45: composer attachment chips */
.od-att-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.od-att-row:empty { display: none; }
.od-att-chip { display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; border-radius: 8px; font-size: 12px;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant); }
.od-att-name { border: 0; background: none; font: inherit; cursor: pointer;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-att-name:hover { text-decoration: underline; }
.od-att-size { color: var(--md-sys-color-on-surface-variant); }
.od-att-x { border: 0; background: none; cursor: pointer; font-size: 15px;
  line-height: 1; padding: 0 4px; opacity: .6; }
.od-att-x:hover { opacity: 1; }

/* L38: mail thread three-pane — thread column + right context */
.md-mail-page .md-mail-threadcol { flex: 1; min-width: 0; display: flex;
  flex-direction: column; padding: var(--od-pad-content); }
.md-mail-context { flex: 0 0 300px; overflow-y: auto;
  padding: var(--od-pad-content) var(--od-pad-content) var(--od-pad-content) 0;
  display: flex; flex-direction: column; gap: 10px; }
.md-mail-ctxcard { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.md-mail-person { display: flex; align-items: center; gap: 10px; }
.md-mail-personcol { display: flex; flex-direction: column; min-width: 0; }
.md-mail-personcol strong { font-size: 13px; }
.md-mail-dealmeta { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; }
.md-mail-dealmeta div { display: flex; gap: 8px; }
.md-mail-dealmeta dt { flex: 0 0 auto; }
.md-mail-dealmeta dd { margin: 0; overflow: hidden; text-overflow: ellipsis; }
.od-stagebar { display: flex; gap: 3px; margin-top: 6px; }
.od-stageseg { flex: 1; height: 8px; border-radius: 2px;
  background: var(--md-sys-color-surface-container-high); }
.od-stageseg.on { background: var(--md-sys-color-success-container, #2e7d32);
  background: #2e7d32; }
.od-deallink { position: relative; }
.od-deallink input[type=search] { width: 100%; height: 32px; padding: 0 10px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: 8px;
  font: inherit; font-size: 13px; }
@media (max-width: 1100px) { .md-mail-context { display: none; } }
.od-fc-won { color: #1b5e20; font-weight: 600; }
.od-forecast .md-kanban-card.won { border-left: 3px solid #2e7d32; }
.od-ai-titlerow { display: flex; align-items: center; gap: 10px; }
.od-ai-titlerow .md-ai-title { flex: 1; }

/* L37 (revisto): the Contacts sub-nav — a thin rail inside /contacts that
   switches People / Organizations, the Pipedrive layout. */
.md-contacts-rail { flex: 0 0 180px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px; border-right: 1px solid var(--md-sys-color-outline-variant); }
.md-contacts-rail a { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 999px; text-decoration: none; color: var(--md-sys-color-on-surface);
  font-size: 14px; }
.md-contacts-rail a.active { background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container); }
.md-contacts-rail a:hover:not(.active) { background: var(--md-sys-color-surface-container); }
.md-contacts-rail svg { width: 18px; height: 18px; fill: currentColor; opacity: .75; }
main.md-contacts-layout { display: flex; gap: 0; padding: 0; align-items: stretch;
  min-height: calc(100vh - 76px); }
main.md-contacts-layout > .md-contacts-main { flex: 1; min-width: 0; padding: var(--od-pad-content); }
@media (max-width: 720px) {
  main.md-contacts-layout { flex-direction: column; }
  .md-contacts-rail { flex-direction: row; border-right: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant); }
}
.od-row-actions { display: flex; gap: 6px; }
.od-row-actions form { display: inline; }