/* ============================================================================
   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 gray-blue + acento teal (#0d9488) só nos pontos de ação.
   ============================================================================ */

:root {
  --m-bg:        #eaedf3;   /* fundo (mais visível p/ os cards "flutuarem") */
  --m-surface:   #ffffff;   /* cards, inputs */
  --m-border:    #e4e7ee;   /* bordas suaves */
  --m-border-2:  #edeff4;   /* divisórias/linhas de tabela */
  --m-text:      #232732;   /* texto principal */
  --m-muted:     #6b7280;   /* texto secundário */
  --m-faint:     #9aa1ad;   /* 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: uppercase;
  font-size: .72rem;
  letter-spacing: .04em;
  font-weight: 600;
  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: uppercase;
  letter-spacing: .06em;
  font-size: .7rem;
  font-weight: 600;
  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; }