/* ============================================================================
   h2025 — Camada de design "clean / minimal" (refresh visual do portal)
   ----------------------------------------------------------------------------
   Carregado POR ÚLTIMO (depois de style.css/NiceAdmin e ayia-fonts.css), então
   vence por ordem — sem precisar de !important na maioria dos casos. Aditivo e
   reversível: remover o <link> volta ao tema antigo. NÃO mexe em tipografia
   (ayia-fonts.css cuida disso) nem em layout estrutural (posição/grid) — só
   superfícies: cores, bordas, raios, sombras, espaçamento e estados.

   Paleta neutra pura (padrão Apple, 2026-11-14) + acento teal (#0d9488) só nos pontos de ação.
   ============================================================================ */

:root {
  --m-bg:        #f5f5f7;   /* fundo (mais visível p/ os cards "flutuarem") */
  --m-surface:   #ffffff;   /* cards, inputs */
  --m-border:    #e5e5ea;   /* bordas suaves */
  --m-border-2:  #f0f0f2;   /* divisórias/linhas de tabela */
  --m-text:      #1d1d1f;   /* texto principal */
  --m-muted:     #6e6e73;   /* texto secundário */
  --m-faint:     #86868b;   /* placeholders / hints */
  /* Acento = teal da marca AYIA (#0d9488 / teal-600), não o índigo do NiceAdmin */
  --m-primary:    #0d9488;
  --m-primary-d:  #0b7d72;
  --m-soft:       rgba(13, 148, 136, .10);  /* fundo de hover/seleção */
  --m-ring:       rgba(13, 148, 136, .18);
  /* sombra de "elevação" suave — pegada SaaS moderno */
  --m-shadow:    0 1px 2px rgba(16,24,40,.04), 0 12px 28px -12px rgba(16,24,40,.16);
  --m-shadow-md: 0 8px 24px -8px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.06);
  --m-radius:    16px;
  --m-radius-sm: 12px;
}

/* ── Fundo + texto ───────────────────────────────────────────────────────── */
body {
 
  color: var(--m-text);
}

/* ── Page title / breadcrumb ─────────────────────────────────────────────── */
.pagetitle h1 { color: #1f2430; font-weight: 600; letter-spacing: -.015em; }
.breadcrumb { color: var(--m-faint); font-weight: 500; }
.breadcrumb a, .breadcrumb .active { color: var(--m-muted); }

/* ── Cards: borda fininha + sombra leve (mata a sombra difusa pesada) ─────── */
.card {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  margin-bottom: 26px;
}
.card-body { padding: 26px 28px 28px; }
.card-title { color: #1f2430; font-weight: 600; }
.card-header, .card-footer { background: var(--m-surface); border-color: var(--m-border-2); }

/* ── Formulários ─────────────────────────────────────────────────────────── */
.form-label {
  font-weight: 600;
  color: #3a3f4b;
  margin-bottom: .45rem;
  font-size: .875rem;
}
.form-control,
.form-select {
  border: 1.5px solid #e2e6ee;
  border-radius: var(--m-radius-sm);
  padding: .65rem .95rem;
  min-height: 46px;
  color: var(--m-text);
  background-color: var(--m-surface);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { min-height: auto; line-height: 1.5; }
.form-control::placeholder { color: var(--m-faint); }
.form-control:focus,
.form-select:focus {
  border-color: var(--m-primary);
  box-shadow: 0 0 0 3px var(--m-ring);
}
.form-control-sm, .form-select-sm { min-height: 36px; border-radius: 8px; padding: .35rem .6rem; }
.form-text { color: var(--m-faint); }

/* Switches mais limpos */
.form-check-input { border-color: #cfd3dc; }
.form-check-input:checked { background-color: var(--m-primary); border-color: var(--m-primary); }
.form-check-input:focus { border-color: var(--m-primary); box-shadow: 0 0 0 3px var(--m-ring); }

/* Mantém cantos retos dentro de input-group (Bootstrap já tem regra mais
   específica, mas reforçamos o raio externo) */
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-text {
  border: 1px solid var(--m-border);
  background: #fbfbfd;
  color: var(--m-muted);
  border-radius: var(--m-radius-sm);
}

/* ── Botões ──────────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--m-radius-sm);
  padding: .6rem 1.1rem;
  font-weight: 600;
  font-size: .9rem;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .04s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .38rem .7rem; font-size: .82rem; border-radius: 8px; }
.btn-lg { border-radius: 12px; }

.btn-primary {
  background: var(--m-primary);
  border-color: var(--m-primary);
  box-shadow: 0 1px 2px rgba(13,148,136,.28);
}
.btn-primary:hover,
.btn-primary:focus { background: var(--m-primary-d); border-color: var(--m-primary-d); }
.btn-primary:focus { box-shadow: 0 0 0 3px var(--m-ring); }

/* Outline/secondary mais suaves */
.btn-outline-secondary { border-color: var(--m-border); color: #5b6270; }
.btn-outline-secondary:hover { background: #f3f4f7; border-color: #dadde4; color: #2b2f38; }
.btn-outline-primary { border-color: #9fded7; color: var(--m-primary); }
.btn-outline-primary:hover { background: var(--m-primary); border-color: var(--m-primary); color: #fff; }
.btn-secondary { background: #eef0f4; border-color: #eef0f4; color: #3a3f4b; }
.btn-secondary:hover { background: #e3e6ec; border-color: #e3e6ec; color: #2b2f38; }
.btn-link { font-weight: 600; }

/* btn-group segmentado (filtros, abas Habilitadas/Todas) — pílula moderna */
.btn-group-sm > .btn { border-radius: 8px; }
.btn-group .btn-outline-secondary.active,
.btn-group .btn-check:checked + .btn-outline-secondary {
  background: var(--m-primary);
  border-color: var(--m-primary);
  color: #fff;
}

/* ── Tabelas: arejadas, header discreto, hover sutil ─────────────────────── */
.table {
  --bs-table-bg: transparent;
  color: var(--m-text);
  margin-bottom: 0;
}
.table > thead th,
.table > thead > tr > th {
  text-transform:none;
  font-size: .75rem;
  letter-spacing:normal;
  font-weight:500;
  color: #8a90a0;
  border-bottom: 1px solid var(--m-border);
  padding: .7rem .75rem;
  background: transparent;
}
.table > tbody > tr > td {
  padding: .8rem .75rem;
  border-top: 1px solid var(--m-border-2);
  vertical-align: middle;
}
.table > tbody > tr:first-child > td { border-top: none; }
.table-hover > tbody > tr:hover > * { background-color: #f8f9fb; }
/* Datatables (listas CRUD admin) — linhas compactas, sobrepõem o padding
   "arejado" do .table acima. Mesma especificidade (0,1,3) do bloco base e do
   vendor simple-datatables; vence por vir depois. Só vertical (mantém o
   horizontal). */
.datatable-table > tbody > tr > td,
table.datatable > tbody > tr > td {
  padding-top: .45rem;
  padding-bottom: .45rem;
}
.datatable-table > thead > tr > th,
table.datatable > thead > tr > th {
  padding-top: .5rem;
  padding-bottom: .5rem;
}
/* Botões de ação nas linhas do datatable: eram ~34px e viravam o "piso" da
   altura da linha (acima do padding). Encolhe vertical (mantém o horizontal e
   a área clicável razoável) -> linha ~49px cai p/ ~40px. Especificidade
   (0,2,3) vence o .btn-sm global (0,1,0). */
.datatable-table > tbody > tr > td .btn-sm,
table.datatable > tbody > tr > td .btn-sm,
.datatable-table > tbody > tr > td .btn,
table.datatable > tbody > tr > td .btn {
  padding: .25rem .45rem;   /* vertical menor + horizontal apertado p/ botão só-ícone não ficar largo */
  line-height: 1.1;
}
/* .table-sm volta a ser COMPACTO. O bloco .table "arejado" (.8rem) acima
   sobrescrevia o utilitario do Bootstrap (mesma especificidade, mas carrega
   depois), entao toda .table-sm aparecia espacada. Tabelas que pedem densidade
   (ex.: lista de Representantes) usam .table-sm; vence por vir depois aqui. */
.table-sm > thead > tr > th,
.table-sm > tbody > tr > td,
.table-sm > tbody > tr > th {
  padding-top: .35rem;
  padding-bottom: .35rem;
}
.table code, td code, .small code {
  background: #f4f5f8;
  color: #4a5263;
  padding: .08rem .4rem;
  border-radius: 6px;
  font-size: .82em;
}

/* ── Badges / alerts / list-group ────────────────────────────────────────── */
.badge { font-weight: 600; border-radius: 7px; padding: .35em .6em; }
.alert { border-radius: var(--m-radius-sm); border: 1px solid transparent; }
.list-group-item { border-color: var(--m-border-2); }

/* ── Modais ──────────────────────────────────────────────────────────────── */
.modal-content { border: none; border-radius: var(--m-radius); box-shadow: var(--m-shadow-md); }
.modal-header, .modal-footer { border-color: var(--m-border-2); }

/* ── Sidebar — paleta UNIFORME tipo AYIA: tudo cinza-ardósia, teal só no ativo.
   (O NiceAdmin pinta inativo de azul-marinho e ícones de índigo → "misturado".
   Aqui igualamos a especificidade do tema base p/ vencer.)                    */
.sidebar-nav .nav-heading {
  text-transform:none;
  letter-spacing:normal;
  font-size: .75rem;
  font-weight:500;
  color: #aab2c0;
  margin: 14px 0 4px 16px;
}
/* base + collapsed (inativo) = cinza-ardósia, fundo transparente */
.sidebar-nav .nav-link,
.sidebar-nav .nav-link.collapsed {
  color: #5b6675;
  background: transparent;
  font-weight: 500;
  border-radius: 10px;
  margin: 2px 8px;
  padding: .55rem .75rem;
  transition: background-color .15s ease, color .15s ease;
}
.sidebar-nav .nav-link i,
.sidebar-nav .nav-link.collapsed i { color: #97a0af; }
/* hover (inativo) — cinza um pouco mais escuro, fundo levíssimo */
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.collapsed:hover { background: #f2f4f6; color: #2b2f38; }
.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-link.collapsed:hover i { color: #5b6675; }
/* ATIVO / grupo aberto = cor-base + fundo soft (2 tons derivados da cor-base do
   tenant). Pill limpo, sem barra. Cai no teal (#0d9488) se --cor-base nao setada. */
.sidebar-nav .nav-link:not(.collapsed),
.sidebar-nav .nav-link.active {
  color: var(--cor-base, var(--m-primary));
  background: var(--cor-base-soft, var(--m-soft));
}
.sidebar-nav .nav-link:not(.collapsed) i,
.sidebar-nav .nav-link.active i { color: var(--cor-base, var(--m-primary)); }
/* Submenu (nav-content a) — mesmo cinza; ativo/hover cor-base */
.sidebar-nav .nav-content a { color: #5b6675; font-weight: 500; border-radius: 8px; }
.sidebar-nav .nav-content a:hover { color: #2b2f38; background: #f2f4f6; }
.sidebar-nav .nav-content a.active { color: var(--cor-base, var(--m-primary)); background: var(--cor-base-soft, var(--m-soft)); }
.sidebar-nav .nav-content a:hover i,
.sidebar-nav .nav-content a.active i { color: var(--cor-base, var(--m-primary)); }

/* ── Header / topo ───────────────────────────────────────────────────────── */
.header { box-shadow: 0 1px 0 rgba(16,24,40,.06); }

/* ── Tabs (MDI do tab-manager) ───────────────────────────────────────────── */
.nav-tabs-bordered { border-bottom: 1px solid var(--m-border); }
.nav-tabs-bordered .nav-link { color: var(--m-muted); border-radius: 8px 8px 0 0; }
.nav-tabs-bordered .nav-link.active { color: var(--m-primary); border-bottom: 2px solid var(--m-primary); background: transparent; }

/* ── Aplicativos (sis_aplicativo) ocupam a TELA TODA: 100% de largura ──
   O tab-manager marca `body.app-fullscreen` ao ativar uma view de aplicativo
   (as que já recolhem a sidebar). Regra global do SHELL com especificidade
   maior que `.op-report` → vence os `max-width` por-página SEM depender da
   ordem de carga dos <style> dos snippets. Isso resolve o vazamento em que
   abrir o "Meu Dia" (não-100%) encolhia o Dashboard, e generaliza o 100%
   para todo aplicativo (dashboard, meu dia, onepage-representante, ...).
   Só afeta APLICATIVO — os sis_programa (CRUDs) seguem com seu max-width. */
body.app-fullscreen .op-report { max-width: none; margin: 0; }
body.app-fullscreen .op-report .wrap { max-width: none; }

/* ── SUPERFÍCIES — AYIA-TEC etapa 3 (2026-11-15) ─────────────────────────────
   Cartões e tabelas Bootstrap do portal (o resto das telas herda daqui). Mesmo
   contrato das telas AYIA (`dash-kpi.css` §5): cartão branco sobre #f5f5f7 se
   destaca pela sombra, não pela linha. Cor/sombra só no tema CLARO
   (`body:not(.dark-mode)`) — o dark fica com o que já tinha. Aditivo.
   ⚠️ Prefixo `--m-` de propósito: `--edge-card`/`--shadow-card` (sem prefixo)
   são do `.dk-report` e só podem existir no tema claro — declará-los no :root
   faria o dark das telas AYIA herdá-los e perder o valor de reserva. */
:root {
  --m-edge:        rgba(0,0,0,.05);
  --m-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
  --m-hair-row:    rgba(0,0,0,.06);
}
body:not(.dark-mode) .card {
  border-color: var(--m-edge);
  box-shadow: var(--m-shadow-card);
}
body:not(.dark-mode) .card-header,
body:not(.dark-mode) .card-footer { border-color: var(--m-hair-row); }

/* Tabelas: cabeçalho só pela cor do texto (linha a 6%), corpo em hairline 6%,
   hover #f5f5f7. A primeira linha já nasce sem borda (bloco acima). */
body:not(.dark-mode) .table > thead th,
body:not(.dark-mode) .table > thead > tr > th { border-bottom-color: var(--m-hair-row); }
body:not(.dark-mode) .table > tbody > tr > td { border-top-color: var(--m-hair-row); border-bottom-color: var(--m-hair-row); }
body:not(.dark-mode) .table > tbody > tr:last-child > td { border-bottom-color: transparent; }
body:not(.dark-mode) .table-hover > tbody > tr:hover > * { background-color: #f5f5f7; }

/* ══ COMPONENTES — AYIA-TEC etapa 4 (2026-11-16) ═════════════════════════════
   Um estilo só para botão, chip e campo, no acabamento do painel "Escolher
   quadros" do Feeds: botão em PÍLULA (999px), chip em pílula sem borda (fundo
   suave + texto da cor), campo com raio 10 e foco = borda teal + anel 3px.
   Cores de marca/semânticas NÃO mudam — só formato, altura, peso e o anel.
   Cor nova (branco/#d2d2d7/#f5f5f7) só no tema CLARO (`body:not(.dark-mode)`);
   no dark muda só a geometria. Bloco ADITIVO: apagar daqui até o fim volta à
   etapa 3. Tokens globais do portal (valem p/ toda tela aberta no shell). */

:root{
  --btn-radius:999px; --btn-h:36px; --btn-h-sm:32px; --btn-fs:13px; --btn-fw:500;
  --icon-btn:32px; --icon-btn-radius:10px;
  --chip-radius:999px; --chip-fs:12px; --chip-fw:500; --chip-pad:3px 10px;
  --field-radius:10px; --field-h:36px; --field-h-sm:32px;
  --focus-ring:0 0 0 3px rgba(13,148,136,.18);
}
/* Botões: pílula, 36px (sm 32px), 13px/500. line-height fixo = altura previsível
   mesmo com .btn inline-block (min-height não centralizaria o texto). */
.btn{border-radius:var(--btn-radius);font-size:var(--btn-fs);font-weight:var(--btn-fw);line-height:20px;padding:7px 16px;}
.btn-sm,.btn-group-sm>.btn{border-radius:var(--btn-radius);font-size:var(--btn-fs);line-height:20px;padding:5px 12px;}
.btn-lg,.btn-group-lg>.btn{border-radius:var(--btn-radius);}
.btn:focus-visible,.btn-check:focus-visible+.btn{box-shadow:var(--focus-ring);}
.btn-primary{box-shadow:none;}
.btn-primary:focus{box-shadow:none;}
.btn-primary:focus-visible{box-shadow:var(--focus-ring);}
/* As linhas de datatable continuam compactas (regra (0,2,3) acima vence). */
/* Grupos: os cantos INTERNOS continuam retos — as regras do Bootstrap
   (.btn-group>.btn:not(:last-child)…, especificidade 0,4,0) vencem a pílula.
   Dentro de .input-group o botão fala a língua do campo (raio 10), não pílula. */
.input-group>.btn{border-radius:var(--field-radius);}
/* Secundário = fundo branco, borda #d2d2d7, texto #1d1d1f, hover #f5f5f7 (só no claro). */
body:not(.dark-mode) .btn-secondary,
body:not(.dark-mode) .btn-outline-secondary,
body:not(.dark-mode) .btn-light{background:#fff;border-color:#d2d2d7;color:#1d1d1f;}
body:not(.dark-mode) .btn-secondary:hover,
body:not(.dark-mode) .btn-outline-secondary:hover,
body:not(.dark-mode) .btn-light:hover{background:#f5f5f7;border-color:#d2d2d7;color:#1d1d1f;}
/* o "ativo" do segmentado continua teal sólido (regra .btn-group acima). */
body:not(.dark-mode) .btn-group .btn-outline-secondary.active,
body:not(.dark-mode) .btn-group .btn-check:checked+.btn-outline-secondary{background:var(--m-primary);border-color:var(--m-primary);color:#fff;}

/* Chips/badges: pílula 12px/500, padding 3px 10px, fundo suave + texto da cor.
   O contador do sino do cabeçalho (.badge-number) fica como está. */
.badge:not(.badge-number){border-radius:var(--chip-radius);font-size:var(--chip-fs);font-weight:var(--chip-fw);padding:var(--chip-pad);line-height:16px;}
body:not(.dark-mode) .badge:not(.badge-number).bg-primary,body:not(.dark-mode) .badge:not(.badge-number).text-bg-primary{background-color:rgba(13,148,136,.12)!important;color:#0a5f57!important;}
body:not(.dark-mode) .badge:not(.badge-number).bg-success,body:not(.dark-mode) .badge:not(.badge-number).text-bg-success{background-color:rgba(25,135,84,.12)!important;color:#146c43!important;}
body:not(.dark-mode) .badge:not(.badge-number).bg-danger,body:not(.dark-mode) .badge:not(.badge-number).text-bg-danger{background-color:rgba(220,53,69,.12)!important;color:#b02a37!important;}
body:not(.dark-mode) .badge:not(.badge-number).bg-warning,body:not(.dark-mode) .badge:not(.badge-number).text-bg-warning{background-color:rgba(255,193,7,.20)!important;color:#8a6500!important;}
body:not(.dark-mode) .badge:not(.badge-number).bg-info,body:not(.dark-mode) .badge:not(.badge-number).text-bg-info{background-color:rgba(13,202,240,.14)!important;color:#087990!important;}
body:not(.dark-mode) .badge:not(.badge-number).bg-secondary,body:not(.dark-mode) .badge:not(.badge-number).text-bg-secondary{background-color:rgba(0,0,0,.06)!important;color:#424245!important;}
body:not(.dark-mode) .badge:not(.badge-number).bg-light,body:not(.dark-mode) .badge:not(.badge-number).text-bg-light{background-color:#f5f5f7!important;color:#424245!important;}
body:not(.dark-mode) .badge:not(.badge-number).bg-dark,body:not(.dark-mode) .badge:not(.badge-number).text-bg-dark{background-color:rgba(0,0,0,.08)!important;color:#1d1d1f!important;}

/* Campos: 36px (sm 32px), raio 10, borda #d2d2d7, fundo branco, foco teal + anel. */
.form-control,.form-select{min-height:var(--field-h);border-width:1px;border-radius:var(--field-radius);padding-top:5px;padding-bottom:5px;padding-left:12px;}
.form-control{padding-right:12px;}
.form-select{padding-right:34px;background-position:right 12px center;}
textarea.form-control{min-height:auto;padding-top:8px;padding-bottom:8px;}
.form-control-sm,.form-select-sm{min-height:var(--field-h-sm);border-radius:var(--field-radius);padding-top:4px;padding-bottom:4px;}
.form-control:focus,.form-select:focus{border-color:var(--m-primary);box-shadow:var(--focus-ring);}
.input-group-text{border-radius:var(--field-radius);}
/* estado (inválido/válido) e desabilitado/somente-leitura continuam com a cor do Bootstrap */
body:not(.dark-mode) .form-control:not(.is-invalid):not(.is-valid),body:not(.dark-mode) .form-select:not(.is-invalid):not(.is-valid){border-color:#d2d2d7;}
body:not(.dark-mode) .form-control:not(:disabled):not([readonly]),body:not(.dark-mode) .form-select:not(:disabled){background-color:#fff;}
body:not(.dark-mode) .form-control:not(.is-invalid):not(.is-valid):focus,body:not(.dark-mode) .form-select:not(.is-invalid):not(.is-valid):focus{border-color:var(--m-primary);}
body:not(.dark-mode) .input-group-text{border-color:#d2d2d7;background:#f5f5f7;}
body:not(.dark-mode) .form-control::placeholder{color:#86868b;}
.form-check-input:focus{box-shadow:var(--focus-ring);}
input[type=checkbox],input[type=radio],input[type=range],progress{accent-color:var(--m-primary);}
/* simple-datatables (listas CRUD): mesmo campo. */
.datatable-input,.datatable-selector{border-radius:var(--field-radius);}
.datatable-input:focus,.datatable-selector:focus{outline:none;border-color:var(--m-primary);box-shadow:var(--focus-ring);}

/* Abas internas (.nav-tabs DENTRO das telas — a #tab-bar do shell tem regra própria
   no style.css e fica fora pelo :not). Sublinhado fino teal: é a mesma gramática da
   #tab-bar, do .nav-tabs-bordered e das abas editoriais do .op-report. :where() deixa
   o :not(#tab-bar) sem peso de id — a tela que já desenha a própria aba continua vencendo. */
.nav-tabs:where(:not(#tab-bar)){border-bottom:1px solid rgba(0,0,0,.08);}
.nav-tabs:where(:not(#tab-bar)) .nav-link{border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px;background:transparent;font-size:13px;font-weight:500;padding:8px 12px;}
.nav-tabs:where(:not(#tab-bar)) .nav-link.active,
.nav-tabs:where(:not(#tab-bar)) .nav-item.show .nav-link{background:transparent;border-bottom-color:var(--m-primary);}
body:not(.dark-mode) .nav-tabs:where(:not(#tab-bar)) .nav-link{color:#6e6e73;}
body:not(.dark-mode) .nav-tabs:where(:not(#tab-bar)) .nav-link:hover{color:#1d1d1f;border-bottom-color:rgba(0,0,0,.14);}
body:not(.dark-mode) .nav-tabs:where(:not(#tab-bar)) .nav-link.active,
body:not(.dark-mode) .nav-tabs:where(:not(#tab-bar)) .nav-item.show .nav-link{color:#0a5f57;border-bottom-color:var(--m-primary);}
.nav-tabs:where(:not(#tab-bar)) .nav-link:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:8px 8px 0 0;}