/* ============================================================
   Controle do Ninho — Admin CSS
   Identidade visual: Amoderna Consultoria Projetos Execução
   Cores: azul #1E345D | laranja #B05F2A | areia #F6F4EF
   Tipografia: Poppins (títulos) | Open Sans (corpo)
   ============================================================ */

:root {
  --cdn-azul:    #1E345D;
  --cdn-laranja: #B05F2A;
  --cdn-areia:   #F6F4EF;
  --cdn-branco:  #FFFFFF;
  --cdn-cinza:   #6B7280;
  --cdn-borda:   #E2E0D8;
  --cdn-sucesso: #2D6A4F;
  --cdn-alerta:  #D97706;
  --cdn-erro:    #B91C1C;
}

/* ── Tipografia global ──────────────────────────────────── */
/* Sem prefixo #wpwrap de propósito — o .cdn-wrap já escopa isso sozinho,
   e assim as mesmas regras valem tanto dentro do wp-admin quanto no
   frontend (shortcode [controle_ninho], ver CDN_Frontend). */
.cdn-wrap,
.cdn-wrap * {
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
}

.cdn-wrap h1,
.cdn-wrap h2,
.cdn-wrap h3,
.cdn-wrap h4 {
  font-family: 'Poppins', sans-serif;
  color: var(--cdn-azul);
}

/* ── Cabeçalho da página ────────────────────────────────── */
.cdn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cdn-azul);
  color: var(--cdn-branco);
  padding: 18px 28px;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
}

.cdn-header h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--cdn-branco);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cdn-header h1 .cdn-icon {
  font-size: 1.4rem;
}

/* ── Container principal ────────────────────────────────── */
.cdn-wrap {
  margin: 20px 20px 20px 0;
  background: var(--cdn-branco);
  border: 1px solid var(--cdn-borda);
  border-radius: 8px;
  overflow: hidden;
}

.cdn-body {
  padding: 24px 28px;
}

/* ── Botões ─────────────────────────────────────────────── */
.cdn-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none !important;
  text-decoration: none !important;
  transition: opacity .15s, transform .1s;
  /* Remove o atraso de ~300ms no toque e o "flash" cinza padrão do
     Android/Chrome ao tocar em botões/links — resposta mais imediata. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cdn-btn:hover  { opacity: .88; }
/* Feedback de toque tipo app nativo: "afunda" ligeiramente ao tocar, em vez
   de só mudar a opacidade — sensação mais próxima de um botão de verdade. */
.cdn-btn:active { opacity: .72; transform: scale(.96); }

/* !important nas cores/borda: no frontend o tema (ou "cores globais" de um
   page builder) aplica sua própria cor em seletores genéricos (button,
   input[type=submit], a) — às vezes com !important — sobrescrevendo estas
   classes. Sem isso os botões saem com a cor do tema (ex.: rosa) em vez do
   azul/laranja da marca. */
.cdn-btn-primary {
  background: var(--cdn-laranja) !important;
  color: var(--cdn-branco) !important;
}
.cdn-btn-secondary {
  background: var(--cdn-azul) !important;
  color: var(--cdn-branco) !important;
}
.cdn-btn-ghost {
  background: transparent !important;
  color: var(--cdn-azul) !important;
  border: 1.5px solid var(--cdn-azul) !important;
}
.cdn-btn-danger {
  background: var(--cdn-erro) !important;
  color: var(--cdn-branco) !important;
}
.cdn-btn-sm {
  padding: 5px 12px;
  font-size: 0.8rem;
}

/* ── Tabela ─────────────────────────────────────────────── */
.cdn-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
}

.cdn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.cdn-table thead tr {
  background: var(--cdn-azul);
  color: var(--cdn-branco);
}

.cdn-table thead th {
  padding: 11px 14px;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: .03em;
  white-space: nowrap;
}

.cdn-table tbody tr:nth-child(even) {
  background: var(--cdn-areia);
}

.cdn-table tbody tr:hover {
  background: #EDE9E0;
}

/* Feedback de toque na linha — como o tap-highlight padrão do navegador é
   removido em vários lugares do plugin (ver seção de responsividade
   mobile), sem isso o toque numa linha da tabela não dá nenhum retorno
   visual até a navegação de fato acontecer. */
.cdn-table tbody tr:active {
  background: #E4DFD3;
}

.cdn-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--cdn-borda);
  vertical-align: middle;
}

.cdn-table .actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

/* ── Formulários ────────────────────────────────────────── */
.cdn-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px 24px;
}

.cdn-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cdn-form-group label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cdn-azul);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cdn-form-group input,
.cdn-form-group select,
.cdn-form-group textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--cdn-borda);
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  /* 16px evita que o Safari/iOS dê zoom automático ao focar o campo */
  font-size: 16px;
  color: #1F2937;
  transition: border-color .15s;
}

.cdn-form-group input:focus,
.cdn-form-group select:focus,
.cdn-form-group textarea:focus {
  outline: none;
  border-color: var(--cdn-laranja);
  box-shadow: 0 0 0 3px rgba(176, 95, 42, .12);
}

.cdn-form-group textarea {
  resize: vertical;
  min-height: 90px;
}

.cdn-form-full {
  grid-column: 1 / -1;
}

.cdn-form-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Badges de status ───────────────────────────────────── */
.cdn-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  letter-spacing: .02em;
}
.cdn-badge-ativo      { background: #D1FAE5; color: #065F46; }
.cdn-badge-lead       { background: #DBEAFE; color: #1E40AF; }
.cdn-badge-negociacao { background: #FEF3C7; color: #92400E; }
.cdn-badge-inativo    { background: #F3F4F6; color: #6B7280; }

/* ── Dashboard cards ────────────────────────────────────── */
.cdn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.cdn-card {
  background: var(--cdn-areia);
  border: 1px solid var(--cdn-borda);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.cdn-card-number {
  font-family: 'Poppins', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--cdn-azul);
  line-height: 1;
}

.cdn-card-label {
  font-size: 0.8rem;
  color: var(--cdn-cinza);
  margin-top: 4px;
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cdn-card-accent .cdn-card-number { color: var(--cdn-laranja); }

/* ── Seção de detalhe do cliente ────────────────────────── */
.cdn-section-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cdn-azul);
  border-left: 4px solid var(--cdn-laranja);
  padding-left: 10px;
  margin: 28px 0 14px;
}

/* ── Alertas ────────────────────────────────────────────── */
.cdn-notice {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 16px;
  border-left: 4px solid;
}
.cdn-notice-success {
  background: #F0FDF4;
  border-color: var(--cdn-sucesso);
  color: var(--cdn-sucesso);
}
.cdn-notice-warning {
  background: #FFFBEB;
  border-color: var(--cdn-alerta);
  color: #92400E;
}

/* ── Estrelas de satisfação ─────────────────────────────── */
.cdn-stars {
  color: var(--cdn-laranja);
  font-size: 1rem;
  letter-spacing: 2px;
}

/* ── Filtro de busca ────────────────────────────────────── */
.cdn-search-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cdn-search-bar input[type="text"] {
  padding: 8px 12px;
  border: 1.5px solid var(--cdn-borda);
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  min-width: 240px;
}

.cdn-search-bar select {
  padding: 8px 12px;
  border: 1.5px solid var(--cdn-borda);
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
}

/* ── Paginação ──────────────────────────────────────────── */
.cdn-pagination {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 16px;
}

.cdn-pagination a,
.cdn-pagination span {
  padding: 5px 11px;
  border: 1px solid var(--cdn-borda);
  border-radius: 4px;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--cdn-azul);
}

.cdn-pagination .current {
  background: var(--cdn-azul);
  color: var(--cdn-branco);
  border-color: var(--cdn-azul);
}

/* ── CRM timeline ───────────────────────────────────────── */
.cdn-timeline {
  position: relative;
  padding-left: 24px;
}

.cdn-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cdn-borda);
}

.cdn-timeline-item {
  position: relative;
  margin-bottom: 18px;
}

.cdn-timeline-item::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cdn-laranja);
  border: 2px solid var(--cdn-branco);
  box-shadow: 0 0 0 2px var(--cdn-laranja);
}

.cdn-timeline-meta {
  font-size: 0.78rem;
  color: var(--cdn-cinza);
  margin-bottom: 3px;
}

.cdn-timeline-body {
  background: var(--cdn-areia);
  border: 1px solid var(--cdn-borda);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.88rem;
}

.cdn-timeline-actions {
  margin-top: 6px;
  display: flex;
  gap: 8px;
}

/* ── Label de visualização ──────────────────────────────── */
.cdn-view-label {
  font-size: .75rem;
  color: var(--cdn-cinza);
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  letter-spacing: .04em;
  margin-bottom: 2px;
}

/* ── Feedback de validação ──────────────────────────────── */
:root {
  --cdn-sucesso: #2D6A4F;
}

/* ── Logo / branding ────────────────────────────────────── */
.cdn-brand {
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  color: rgba(255,255,255,.55);
  text-align: right;
}

/* ── Kanban ─────────────────────────────────────────────── */
.cdn-kanban-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: flex-start;
}

.cdn-kanban-col {
  min-width: 200px;
  width: 200px;
  flex-shrink: 0;
  background: var(--cdn-areia);
  border: 1px solid var(--cdn-borda);
  border-radius: 8px;
  overflow: hidden;
}

.cdn-kanban-col-header {
  padding: 10px 12px;
  background: var(--cdn-branco);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cdn-kanban-col-title {
  font-family: 'Poppins', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cdn-azul);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cdn-kanban-col-count {
  background: var(--cdn-azul);
  color: var(--cdn-branco);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: .7rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.cdn-kanban-cards {
  padding: 8px;
  min-height: 80px;
}

.cdn-kanban-card {
  background: var(--cdn-branco);
  border: 1px solid var(--cdn-borda);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: grab;
  transition: box-shadow .15s, transform .1s;
}

.cdn-kanban-card:hover {
  box-shadow: 0 3px 10px rgba(30,52,93,.12);
}

/* Feedback de toque no card (fora do arrastar) — leve "afundada" ao tocar */
.cdn-kanban-card:active {
  transform: scale(.98);
  box-shadow: 0 1px 4px rgba(30,52,93,.1);
}

.cdn-kanban-card-title {
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.3;
}

.cdn-kanban-card-title a { color: var(--cdn-azul); text-decoration: none; }
.cdn-kanban-card-title a:hover { color: var(--cdn-laranja); }

.cdn-kanban-card-cliente { color: var(--cdn-cinza); font-size: .75rem; margin-bottom: 3px; }
.cdn-kanban-card-date { font-size: .75rem; color: var(--cdn-cinza); margin-bottom: 3px; }
.cdn-kanban-card-date.cdn-vencido { color: var(--cdn-erro); font-weight: 600; }
.cdn-kanban-card-valor { font-size: .78rem; color: var(--cdn-azul); font-weight: 600; margin-bottom: 6px; }
.cdn-kanban-card-actions { display: flex; gap: 4px; }

.cdn-kanban-card-placeholder {
  height: 60px;
  background: rgba(176, 95, 42, .08);
  border: 2px dashed var(--cdn-laranja);
  border-radius: 6px;
  margin-bottom: 8px;
}

.cdn-kanban-empty {
  font-size: .78rem;
  color: var(--cdn-cinza);
  text-align: center;
  padding: 16px 8px;
  font-family: 'Poppins', sans-serif;
}

/* ── Badge de etapa ──────────────────────────────────────── */
.cdn-etapa-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

/* ── Resumo financeiro do projeto ────────────────────────── */
.cdn-custo-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.cdn-custo-item {
  background: var(--cdn-areia);
  border: 1px solid var(--cdn-borda);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 140px;
  text-align: center;
}

.cdn-custo-item span {
  display: block;
  font-size: .73rem;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  letter-spacing: .04em;
  color: var(--cdn-cinza);
  margin-bottom: 4px;
}

.cdn-custo-item strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cdn-azul);
}

.cdn-custo-total  { border-top: 3px solid var(--cdn-azul); }
.cdn-custo-venda  strong { color: var(--cdn-laranja); }
.cdn-custo-margem.positivo strong { color: var(--cdn-sucesso); }
.cdn-custo-margem.negativo strong { color: var(--cdn-erro); }

/* ── Details / Summary ───────────────────────────────────── */
.cdn-details-summary {
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--cdn-laranja);
  padding: 8px 0;
  list-style: none;
  outline: none;
}
.cdn-details-summary::-webkit-details-marker { display: none; }

/* ── Menu admin cor ─────────────────────────────────────── */
#adminmenu .toplevel_page_cdn-dashboard .wp-menu-image:before,
#adminmenu .toplevel_page_cdn-dashboard.current .wp-menu-image:before {
  color: #fff !important;
}

/* ── Seção de título de formulário ───────────────────────── */
.cdn-form-section-title {
  font-family: 'Poppins', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cdn-azul);
  border-bottom: 2px solid var(--cdn-borda);
  padding-bottom: 6px;
  margin-bottom: 16px;
}

/* ── Toggle de forma de pagamento ────────────────────────── */
.cdn-payment-toggle {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cdn-payment-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid var(--cdn-borda);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .1s;
  font-size: .88rem;
  color: var(--cdn-azul);
  background: var(--cdn-branco);
  user-select: none;
}
.cdn-payment-option input[type="radio"] {
  display: none;
}
.cdn-payment-option:hover {
  border-color: var(--cdn-laranja);
  background: #fdf9f5;
}
.cdn-payment-option:active {
  transform: scale(.97);
}
.cdn-payment-option.active {
  border-color: var(--cdn-azul);
  background: #f0f3f8;
  font-weight: 600;
}
.cdn-payment-icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* ── Info box (à vista) ──────────────────────────────────── */
.cdn-payment-info-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f6f2;
  border: 1.5px solid #a3c7b5;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .88rem;
  color: var(--cdn-sucesso);
}

/* ── Cards das parcelas (cartão) ─────────────────────────── */
.cdn-payment-parcelas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) {
  .cdn-payment-parcelas { grid-template-columns: 1fr; }
}
.cdn-parcela-card {
  border: 1.5px solid var(--cdn-borda);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--cdn-branco);
}
.cdn-parcela-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cdn-parcela-num {
  font-family: 'Poppins', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: var(--cdn-azul);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cdn-parcela-pct {
  font-family: 'Poppins', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--cdn-laranja);
}

/* ── Badges de pagamento (project-view) ──────────────────── */
.cdn-pg-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}
.cdn-pg-badge-pago {
  background: #d1fae5;
  color: #065f46;
}
.cdn-pg-badge-pendente {
  background: #fef3c7;
  color: #92400e;
}
.cdn-pg-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.cdn-pg-item {
  background: var(--cdn-areia);
  border: 1.5px solid var(--cdn-borda);
  border-radius: 10px;
  padding: 12px 14px;
}
.cdn-pg-item-label {
  font-size: .73rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cdn-cinza);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
.cdn-pg-item-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cdn-azul);
  font-family: 'Poppins', sans-serif;
  margin-top: 4px;
}
.cdn-pg-item-status {
  margin-top: 6px;
}

/* ── Estado vazio (sem registros) ───────────────────────── */
.cdn-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--cdn-cinza);
}
.cdn-empty p {
  font-size: 0.95rem;
  margin: 10px 0 16px;
}

/* ── Label de seção do dashboard ────────────────────────── */
.cdn-dashboard-section-label {
  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cdn-cinza);
  margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVIDADE MOBILE
   ════════════════════════════════════════════════════════════════ */

/* Evita que o iOS/Safari dê zoom automático ao focar um campo —
   sobrescreve inclusive font-size definido inline nas views. */
.cdn-wrap input[type="text"],
.cdn-wrap input[type="search"],
.cdn-wrap input[type="date"],
.cdn-wrap input[type="month"],
.cdn-wrap input[type="number"],
.cdn-wrap input[type="email"],
.cdn-wrap input[type="tel"],
.cdn-wrap input[type="password"],
.cdn-wrap select,
.cdn-wrap textarea {
  font-size: 16px !important;
}

/* Toque mais responsivo em qualquer link/card clicável (Android e iOS) —
   remove o atraso de ~300ms e o "flash" cinza padrão do Chrome no toque. */
.cdn-wrap a,
.cdn-kanban-card,
.cdn-payment-option,
.cdn-badge,
.cdn-pg-badge {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Tabelas largas viram roláveis na horizontal em vez de espremer
   ou quebrar o layout — funciona em qualquer .cdn-table sem precisar
   alterar as views. thead/tbody/tr/td mantêm o display padrão de tabela
   (não sobrescrever isso é o que preserva o alinhamento das colunas). */
@media (max-width: 900px) {
  .cdn-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Em vez de deixar o texto de cada célula quebrar em várias linhas
     (esmaga a tabela e some com o alinhamento das colunas), cada célula
     vira uma única linha e a tabela inteira rola na horizontal — leitura
     mais limpa em telas estreitas. */
  .cdn-table tbody td,
  .cdn-table thead th {
    white-space: nowrap;
  }
  /* Ressalva: colunas que já são texto longo por natureza (observações,
     endereço) continuam podendo quebrar, senão ficam ilegíveis mesmo
     rolando — marque a célula com esta classe na view quando precisar. */
  .cdn-table td.cdn-table-wrap-text {
    white-space: normal;
    min-width: 180px;
  }
  /* Um pouco mais compacto no mobile pra caber mais colunas por scroll */
  .cdn-table thead th,
  .cdn-table tbody td {
    padding: 9px 12px;
    font-size: .85rem;
  }
}

/* Kanban: scroll horizontal mais suave e com "encaixe" por coluna */
.cdn-kanban-board {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.cdn-kanban-col {
  scroll-snap-align: start;
}

@media (max-width: 782px) {

  /* Menos espaço perdido nas bordas — ganha largura útil de tela */
  .cdn-wrap {
    margin: 10px 8px 10px 0;
    border-radius: 6px;
  }
  .cdn-body {
    padding: 16px;
  }

  /* Cabeçalho da página empilha em vez de espremer título + botões */
  .cdn-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
  }
  .cdn-header h1 {
    font-size: 1.1rem;
  }
  .cdn-header > div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .cdn-header .cdn-btn,
  .cdn-header > a.cdn-btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
  .cdn-brand {
    text-align: left;
  }

  /* Botões com alvo de toque maior — 48px cobre tanto a recomendação do
     Android/Material Design (48dp) quanto a da Apple (44pt) de uma vez. */
  .cdn-btn {
    padding: 12px 18px;
    min-height: 48px;
  }
  .cdn-btn-sm {
    padding: 9px 14px;
    min-height: 40px;
  }

  /* Cards do dashboard/resumos ficam mais compactos para caber 2 por linha */
  .cdn-cards,
  .cdn-pg-resumo {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }
  .cdn-card-number {
    font-size: 1.7rem;
  }
  .cdn-custo-resumo {
    gap: 8px;
  }
  .cdn-custo-item {
    min-width: 120px;
    padding: 10px 12px;
  }

  /* Formulários em coluna única, sem depender do minmax caber.
     !important como reforço: se o tema não tiver aplicado a meta tag de
     viewport corretamente (ou tiver algum CSS concorrente), esta regra
     ainda força 1 campo por linha assim que a media query for avaliada. */
  .cdn-form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .cdn-form-full {
    grid-column: 1 / -1 !important;
  }
  .cdn-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cdn-form-actions .cdn-btn,
  .cdn-form-actions form {
    width: 100%;
  }
  .cdn-form-actions form .cdn-btn {
    width: 100%;
  }

  /* Filtros e barras de busca ocupam a largura toda, um por linha */
  .cdn-search-bar input[type="text"],
  .cdn-search-bar select {
    min-width: 0;
    flex: 1 1 100%;
  }

  /* Kanban: colunas um pouco mais estreitas para caber melhor no celular */
  .cdn-kanban-col {
    min-width: 78vw;
    width: 78vw;
  }

  /* Botões de ação dentro de tabelas ficam empilhados e maiores */
  .cdn-table .actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .cdn-cards,
  .cdn-pg-resumo {
    grid-template-columns: 1fr 1fr;
  }
  .cdn-payment-toggle,
  .cdn-payment-option {
    width: 100%;
  }
  .cdn-payment-option {
    justify-content: center;
  }
}

/* ── Progresso circular (donut) — % no centro ─────────────────────────────
   Usado no ponto de equilíbrio (dashboard e Financeiro). Puro CSS:
   conic-gradient preenchido até --pct (0–100), furo central via máscara.
   Cor via --donut-cor (default laranja; verde quando >= 100%). */
.cdn-donut {
  --pct: 0;
  width: var(--donut-tamanho);
  height: var(--donut-tamanho);
  border-radius: 50%;
  background: conic-gradient(var(--donut-cor) calc(var(--pct) * 1%), var(--cdn-borda) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--donut-espessura)), #000 calc(100% - var(--donut-espessura) + 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--donut-espessura)), #000 calc(100% - var(--donut-espessura) + 1px));
  position: relative;
  margin: 0 auto;
}
/* O texto central fica FORA da máscara (senão sumiria) — wrapper posiciona
   e define tamanho/espessura/cor (herdados pelo .cdn-donut). */
.cdn-donut-wrap {
  --donut-tamanho: 96px;
  --donut-espessura: 10px;
  --donut-cor: var(--cdn-laranja);
  position: relative;
  width: var(--donut-tamanho);
  margin: 0 auto;
}
.cdn-donut-wrap-grande {
  --donut-tamanho: 150px;
  --donut-espessura: 14px;
}
.cdn-donut-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.cdn-donut-centro .cdn-donut-pct {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cdn-azul);
  line-height: 1.1;
}
.cdn-donut-centro .cdn-donut-label {
  font-size: .58rem;
  color: var(--cdn-cinza);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cdn-donut-wrap-grande .cdn-donut-pct { font-size: 1.7rem; }