/* Card compacto (origem dos dados) */
.bi-compact-card .card-body{
  padding: 12px 16px !important;
}
.bi-compact-card .form-label{
  margin-bottom: 6px;
}

/* KPI card */
.bi-kpi-card{
  border-radius: 16px;
  overflow:hidden;
}
.bi-kpi-top{
  padding: 8px 12px;
  background: rgba(0,0,0,.04);
}
html.dark .bi-kpi-top{
  background: rgba(255,255,255,.06);
}
.bi-kpi-title{
  font-weight:700;
  font-size:.95rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin:0;
  line-height: 1.1;
}
.bi-kpi-body{
  padding: 14px 16px !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height: 110px;
}
.bi-kpi-value-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bi-kpi-value{
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  text-align:center;
}
.bi-kpi-icon{
  font-size: 2rem;
  line-height:1;
}
.bi-kpi-bottom{
  padding: 8px 12px;
}

/* Estado vazio */
.bi-empty-state{
  min-height: 45vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bi-empty-box{
  text-align:center;
  max-width: 520px;
  padding: 18px;
}
.bi-empty-img{
  max-width: 220px;
  width: 60%;
  opacity:.9;
}

/* ===== ModernoBI Dashboard Cards ===== */
.mbi-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  background: #fff;
  overflow: hidden;
}

.mbi-card .mbi-card-body { padding: 16px; }

.mbi-kpi-top {
  display:flex; align-items:center; justify-content:space-between;
  font-size: 13px; font-weight: 600; color: rgba(0,0,0,.65);
  margin-bottom: 10px;
}

.mbi-kpi-main {
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
}

.mbi-kpi-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.05;
  color: rgba(0,0,0,.85);
}

.mbi-kpi-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(99,102,241,.10);
}

.mbi-kpi-icon i { font-size: 18px; color: rgba(99,102,241,1); }

.mbi-kpi-bottom {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  display:flex; gap: 8px; align-items:center;
}

.mbi-kpi-badge {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16,185,129,.12);
  color: rgba(16,185,129,1);
}

.mbi-chart-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,.75);
  margin-bottom: 8px;
}

.mbi-chart-wrap { width: 100%; }

/* Dark mode — ModernoBI cards (usa html.dark do TitanPHP) */
html.dark .mbi-card {
  background: var(--tc-surface) !important;
  border-color: var(--tc-outline) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}
html.dark .mbi-card .mbi-card-body {
  color: var(--tc-on-surface);
}
html.dark .mbi-kpi-top,
html.dark .mbi-chart-title {
  color: var(--tc-muted) !important;
}
html.dark .mbi-kpi-value {
  color: var(--tc-on-surface) !important;
}
html.dark .mbi-kpi-bottom {
  color: var(--tc-muted);
}
html.dark .mbi-card .mbi-text,
html.dark .mbi-card .mbi-text * {
  color: var(--tc-on-surface) !important;
}
html.dark .mbi-cf-item {
  background: rgba(255,255,255,.03);
  border-color: var(--tc-outline);
}

/* ===== Espaçamento: filter row → list card ===== */
/* The filter row is hidden via JS when collapsed; this gives breathing room when visible */
.container-fluid > .row + .row {
  margin-top: 1rem;
}

/* ===== Accordion: header mais alto e com destaque ===== */
.accordion-rounded-stylish .accordion-header,
.accordion-bordered .accordion-header {
  padding: 14px 20px !important;
  min-height: 54px;
  background-color: color-mix(in srgb, var(--tc-accent) 7%, transparent) !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
}
.accordion-rounded-stylish .accordion-header .accordion-header-text,
.accordion-bordered .accordion-header .accordion-header-text {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--tc-on-surface, #191c1e);
}
html.dark .accordion-rounded-stylish .accordion-header,
html.dark .accordion-bordered .accordion-header {
  background-color: rgba(255, 255, 255, 0.06) !important;
}
html.dark .accordion-rounded-stylish .accordion-header .accordion-header-text,
html.dark .accordion-bordered .accordion-header .accordion-header-text {
  color: var(--tc-on-surface, #e8eaed);
}
/* Padding lateral no corpo do accordion */
.accordion-rounded-stylish .accordion-body-text,
.accordion-bordered .accordion-body-text {
  padding: 20px 24px !important;
}

/* ===== Formulários no conceito SaaS sem bordas =====
   Cada seção (.accordion-item) vira um card: sem borda, sombra ambiente,
   cantos arredondados e um respiro entre as seções. O header recebe o tom
   do accent (acima) e o corpo fica em surface. */
.accordion-item {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: var(--tc-shadow);
  overflow: hidden;                 /* header/corpo respeitam o raio do card */
  background-color: var(--tc-surface);
  margin-bottom: 14px;
}
/* zera bordas internas herdadas (header/corpo) — separação vem da sombra */
.accordion-bordered .accordion-header,
.accordion-rounded-stylish .accordion-header,
.accordion-bordered .accordion__body {
  border: none !important;
}

/* Border radius padrão para Bootstrap cards — estilo SaaS sem borda,
   separação apenas pela sombra ambiente. */
.card {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: var(--tc-shadow);
}
/* Card de filtro (dentro do collapse).
   Dark: herda o tom de surface (via html.dark .card) — fica integrado.
   Claro (Sol): branco + sombra, igual ao card de listagem. */
.collapse > .card {
  background: var(--tc-surface-low) !important;
  box-shadow: none;
}
html:not(.dark) .collapse > .card {
  background: var(--tc-surface) !important;
  box-shadow: var(--tc-shadow);
}
.card-header {
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}
.card-footer {
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

.btn {
  border-radius: 12px !important;
}

/* ============================================================
   ACCENT DINÂMICO — elementos "primary" seguem a paleta ativa.
   Precisa ficar aqui (moderno.css = último CSS) porque o
   bootstrap.min.css carrega DEPOIS de temas.css e sobrescreveria
   qualquer override de .btn-primary feito lá.
   ============================================================ */
.btn-primary {
  --bs-btn-bg:                    var(--tc-accent);
  --bs-btn-border-color:          var(--tc-accent);
  --bs-btn-hover-bg:              var(--tc-primary-c);
  --bs-btn-hover-border-color:    var(--tc-primary-c);
  --bs-btn-active-bg:             var(--tc-primary-c);
  --bs-btn-active-border-color:   var(--tc-primary-c);
  --bs-btn-disabled-bg:           var(--tc-accent);
  --bs-btn-disabled-border-color: var(--tc-accent);
}
.btn-outline-primary {
  --bs-btn-color:                 var(--tc-accent);
  --bs-btn-border-color:          var(--tc-accent);
  --bs-btn-hover-bg:              var(--tc-accent);
  --bs-btn-hover-border-color:    var(--tc-accent);
  --bs-btn-active-bg:             var(--tc-accent);
  --bs-btn-active-border-color:   var(--tc-accent);
}
/* Foco de campos e seleções acompanham o accent */
.form-control:focus,
.form-select:focus {
  border-color: var(--tc-accent);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--tc-accent) 20%, transparent);
}
.form-check-input:checked {
  background-color: var(--tc-accent);
  border-color: var(--tc-accent);
}
/* Paginação (DataTables/Bootstrap) */
.page-link { color: var(--tc-accent); }
.page-item.active .page-link {
  background-color: var(--tc-accent);
  border-color: var(--tc-accent);
}

/* Funnel / card lista */
.mbi-cf-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mbi-cf-item {
  position: relative;
  padding: 12px 14px 12px 16px;
  border-radius: 12px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.06);
}
.mbi-cf-pos {
  width: 34px;
  font-weight: 800;
  opacity: .85;
}
.mbi-cf-accent {
  width: 6px;
  height: 38px;
  border-radius: 999px;
}
.mbi-cf-main {
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.1;
}
.mbi-cf-sub {
  font-size: .82rem;
  opacity: .70;
  margin-top: 3px;
}
.mbi-cf-badge {
  border-radius: 999px;
  padding: .45rem .7rem;
  font-weight: 800;
}

.bi-compact-card {
  height: auto !important;
  min-height: unset !important;
  align-self: flex-start;
}
.bi-admin-toolbar {
  height: auto !important;
  min-height: unset !important;
}

/* ===== Reduz padding lateral do conteúdo principal ===== */
.tc-main {
    padding: 12px !important;
}
@media (min-width: 768px) {
    .tc-main {
        padding: 16px !important;
    }
}
.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ===== Cabeçalho de página (título + botões) ===== */
.tc-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0 14px;
}
.tc-page-header-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--tc-on-surface, #191c1e);
    margin: 0;
    line-height: 1.2;
}
html.dark .tc-page-header-title {
    color: var(--tc-on-surface, #e8eaed);
}

/* ===== Item 2: Table font size ===== */
.table {
    font-size: 13px;
}
.table thead th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ===== Grid moderno (SaaS sem bordas) =====
   Tabelas das listagens (.table.verticle-middle): sem bordas de célula,
   cabeçalho discreto (muted) com uma única divisória, zebra bem sutil e
   hover com leve tom do accent. Vale para todas as telas de lista. */
.table.verticle-middle:not(.table-bordered) {
    --bs-table-bg: transparent;
    /* zebra bem sutil baseada na cor do texto (~3%) */
    --bs-table-striped-bg: color-mix(in srgb, var(--tc-on-surface) 3%, transparent);
    border-color: transparent;
}
/* remove as linhas horizontais/verticais de célula */
.table.verticle-middle:not(.table-bordered) > :not(caption) > * > * {
    border-bottom-color: transparent;
    box-shadow: none;
}
/* cabeçalho: tom suave + única divisória embaixo + mais respiro */
.table.verticle-middle:not(.table-bordered) > thead > tr > th {
    color: var(--tc-muted);
    background: transparent;
    border-bottom: 1px solid var(--tc-outline);
    padding-top: 10px;
    padding-bottom: 10px;
}
/* linhas mais altas (arejado) + divisória bem suave entre as linhas */
.table.verticle-middle:not(.table-bordered) > tbody > tr > td {
    padding-top: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--tc-on-surface) 6%, transparent);
}
/* hover com leve tom do accent — usa os hooks do Bootstrap (5.2 e 5.3) */
.table.verticle-middle:not(.table-bordered) > tbody > tr:hover > * {
    --bs-table-accent-bg: color-mix(in srgb, var(--tc-accent) 8%, transparent);
    --bs-table-bg-state:  color-mix(in srgb, var(--tc-accent) 8%, transparent);
}

/* ===== Item 3: btn-xs sharp — smaller, no shadow, softer colors ===== */
.btn-xs.sharp {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.btn-xs.sharp i {
    margin: 0 !important;
    font-size: 11px;
}
.btn-primary.btn-xs.sharp {
    background-color: color-mix(in srgb, var(--tc-accent) 82%, transparent) !important;
    border-color: color-mix(in srgb, var(--tc-accent) 82%, transparent) !important;
}
.btn-primary.btn-xs.sharp:hover {
    background-color: var(--tc-accent) !important;
    border-color: var(--tc-accent) !important;
}
.btn-danger.btn-xs.sharp {
    background-color: rgba(220, 80, 80, 0.75) !important;
    border-color: rgba(220, 80, 80, 0.75) !important;
}
.btn-danger.btn-xs.sharp:hover {
    background-color: rgba(220, 80, 80, 1) !important;
    border-color: rgba(220, 80, 80, 1) !important;
}
.btn-info.btn-xs.sharp {
    background-color: rgba(23, 162, 184, 0.75) !important;
    border-color: rgba(23, 162, 184, 0.75) !important;
}
.btn-info.btn-xs.sharp:hover {
    background-color: rgba(23, 162, 184, 1) !important;
    border-color: rgba(23, 162, 184, 1) !important;
}

/* ===== Botão secundário (Limpar, Voltar) ===== */
.btn-secondary {
    background-color: #eef0f3 !important;
    color: #3c4043 !important;
    border: 1px solid #d2d5da !important;
    box-shadow: none !important;
    font-weight: 500;
}
.btn-secondary:hover {
    background-color: #e2e5ea !important;
    border-color: #b8bcc4 !important;
    color: #1a1d20 !important;
}
html.dark .btn-secondary {
    background-color: rgba(255, 255, 255, .08) !important;
    color: var(--tc-on-surface, #e8eaed) !important;
    border: 1px solid var(--tc-outline, #3f4144) !important;
}
html.dark .btn-secondary:hover {
    background-color: rgba(255, 255, 255, .14) !important;
    border-color: var(--tc-muted, #6e7175) !important;
}

/* ===== Item 7: Dark mode — form cards, inputs, accordion body ===== */
html.dark .card {
    background-color: var(--tc-surface) !important;
    border-color: var(--tc-outline) !important;
    color: var(--tc-on-surface);
}
/* KPI dashboard — preserva cor da borda esquerda no dark mode */
.dash-kpi-card { border-left-color: var(--kpi-accent) !important; }
html.dark .dash-kpi-card { border-left-color: var(--kpi-accent) !important; }
html.dark .card-header {
    background-color: var(--tc-surface) !important;
    border-color: var(--tc-outline) !important;
    color: var(--tc-on-surface);
}
html.dark .card-title {
    color: var(--tc-on-surface) !important;
}
html.dark .accordion-item {
    background-color: var(--tc-surface) !important;
    border-color: var(--tc-outline) !important;
}
html.dark .accordion__body,
html.dark .accordion-body-text {
    background-color: var(--tc-surface) !important;
    color: var(--tc-on-surface);
}
html.dark .financeiro-box {
    background-color: rgba(255, 255, 255, .04) !important;
    border-color: var(--tc-outline) !important;
}
html.dark .form-control,
html.dark .form-select,
html.dark select.form-control {
    background-color: #2a2d32 !important;
    color: var(--tc-on-surface) !important;
    border-color: var(--tc-outline) !important;
}
html.dark .form-control::placeholder {
    color: var(--tc-muted) !important;
    opacity: 0.7;
}
html.dark .form-label {
    color: var(--tc-on-surface) !important;
}
html.dark .input-group-text {
    background-color: rgba(255, 255, 255, .08) !important;
    border-color: var(--tc-outline) !important;
    color: var(--tc-on-surface) !important;
}
html.dark select.form-control option,
html.dark select.form-select option,
html.dark select option {
    background-color: #2a2d32;
    color: #e8eaed;
}
html.dark select.form-control option:checked,
html.dark select option:checked {
    background-color: var(--tc-accent, #4586e6);
    color: #fff;
}

/* ===== Dark mode — DataTables ===== */
html.dark .dataTables_wrapper {
    color: var(--tc-on-surface) !important;
}
html.dark .dataTables_wrapper .dataTables_length label,
html.dark .dataTables_wrapper .dataTables_filter label,
html.dark .dataTables_wrapper .dataTables_info,
html.dark .dataTables_wrapper .dataTables_processing {
    color: var(--tc-on-surface) !important;
}
html.dark .dataTables_wrapper .dataTables_length select,
html.dark .dataTables_wrapper .dataTables_filter input {
    background-color: #2a2d32 !important;
    color: var(--tc-on-surface) !important;
    border-color: var(--tc-outline) !important;
}
html.dark table.dataTable thead th,
html.dark table.dataTable thead td {
    background-color: #23262b !important;
    color: var(--tc-on-surface) !important;
    border-bottom-color: var(--tc-outline) !important;
}
html.dark table.dataTable thead th.sorting::before,
html.dark table.dataTable thead th.sorting::after,
html.dark table.dataTable thead th.sorting_asc::before,
html.dark table.dataTable thead th.sorting_asc::after,
html.dark table.dataTable thead th.sorting_desc::before,
html.dark table.dataTable thead th.sorting_desc::after {
    color: var(--tc-muted) !important;
    opacity: 0.6;
}
html.dark table.dataTable tbody tr {
    background-color: var(--tc-surface) !important;
    color: var(--tc-on-surface) !important;
}
html.dark table.dataTable tbody tr.odd {
    background-color: var(--tc-surface) !important;
}
html.dark table.dataTable tbody tr.even {
    background-color: rgba(255, 255, 255, .03) !important;
}
html.dark table.dataTable tbody tr:hover {
    background-color: rgba(255, 255, 255, .06) !important;
}
html.dark table.dataTable tbody td {
    border-color: var(--tc-outline) !important;
    color: var(--tc-on-surface) !important;
}
html.dark table.dataTable.table-striped tbody tr.odd > * {
    --bs-table-accent-bg: rgba(255,255,255,.025);
    color: var(--tc-on-surface);
}
html.dark table.dataTable.table-striped tbody tr.even > * {
    --bs-table-accent-bg: transparent;
    color: var(--tc-on-surface);
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--tc-on-surface) !important;
    background: transparent !important;
    border-color: transparent !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(255,255,255,.08) !important;
    border-color: var(--tc-outline) !important;
    color: var(--tc-on-surface) !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--tc-accent, #4586e6) !important;
    border-color: var(--tc-accent, #4586e6) !important;
    color: #fff !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--tc-muted) !important;
    background: transparent !important;
}
html.dark .dt-buttons .btn {
    background-color: #2a2d32 !important;
    border-color: var(--tc-outline) !important;
    color: var(--tc-on-surface) !important;
}
html.dark .dt-buttons .btn:hover {
    background-color: rgba(255,255,255,.10) !important;
}

/* ===== Item 8: Breadcrumb styling ===== */
.breadcrumb {
    font-size: 12px;
    margin-bottom: 0;
    background: transparent;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--tc-muted, #9aa0a6);
    opacity: 0.7;
}
.breadcrumb-item a {
    color: var(--tc-muted, #9aa0a6);
    text-decoration: none;
    font-weight: 400;
}
.breadcrumb-item a:hover {
    color: var(--tc-accent, #4586e6);
}
.breadcrumb-item.active,
.breadcrumb-item.active a {
    color: var(--tc-on-surface, #191c1e);
    font-weight: 600;
    pointer-events: none;
}
html.dark .breadcrumb-item a {
    color: var(--tc-muted, #9aa0a6);
}
html.dark .breadcrumb-item.active,
html.dark .breadcrumb-item.active a {
    color: var(--tc-on-surface, #e8eaed);
}

/* ===== Menu — cabeçalho colapsável de submenu (nível 2, sidebar expandida) ===== */
/*
 * Aparece apenas quando o menu raiz tem submenus (Cadastros > Básico, Cadastros > Diversos).
 * Não aparece quando o raiz tem comandos diretos (Solicitações > Função Y).
 * Comportamento igual ao tc-nav-group-label do raiz: clique colapsa/expande.
 */
.tc-grp-sub-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px 7px 22px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tc-muted, #9aa0a6);
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    transition: background 0.15s;
}
.tc-grp-sub-label:hover {
    background: rgba(0,0,0,.04);
}
html.dark .tc-grp-sub-label {
    color: var(--tc-muted, #6e7175);
}
html.dark .tc-grp-sub-label:hover {
    background: rgba(255,255,255,.06);
}

/* Espaço entre submenus consecutivos (sem linha) */
.tc-grp-sub-items + .tc-grp-sub-label {
    margin-top: 2px;
}

/* Indentação das funções dentro do submenu */
.tc-grp-sub-items .tc-nav-item {
    padding-left: 28px;
}

/* Lado esquerdo do cabeçalho: ícone + texto */
.tc-grp-sub-inner {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tc-grp-sub-inner i,
.tc-grp-sub-inner .material-symbols-outlined {
    font-size: 12px;
    opacity: 0.65;
}

/* Chevron do submenu (roda 90° quando expandido) */
.tc-sub-chevron {
    font-size: 14px;
    opacity: 0.50;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.tc-grp-sub-label[aria-expanded="true"] .tc-sub-chevron {
    transform: rotate(90deg);
}

/* Painel colapsável dos links do submenu */
.tc-grp-sub-items {
    display: none;
}
.tc-grp-sub-items.show {
    display: block;
}

/* ===== Menu — cabeçalho de submenu no flyout (sidebar colapsada) ===== */
.tc-grp-flyout-sub {
    padding: 7px 14px 2px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tc-muted, #9aa0a6);
    margin-top: 4px;
    pointer-events: none;
    user-select: none;
    border-top: 1px solid var(--tc-outline, rgba(0,0,0,.07));
}
.tc-grp-flyout-sub:first-of-type {
    margin-top: 0;
    border-top: none;
}
html.dark .tc-grp-flyout-sub {
    color: var(--tc-muted, #6e7175);
    border-top-color: var(--tc-outline, rgba(255,255,255,.08));
}

/* ===== KPI Stat Card (tc-stat) — card moderno com ícone + label + valor + trend ===== */
.tc-stat {
    background: var(--tc-surface, #fff);
    border-radius: var(--tc-radius-lg, 14px);
    box-shadow: var(--tc-shadow-sm, 0 2px 8px rgba(0,6,19,.06));
    border: 1px solid rgba(0,0,0,.05);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 1rem;
}
.tc-stat__header {
    display: flex;
    align-items: center;
    gap: 14px;
}
.tc-stat__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tc-stat__icon .material-symbols-outlined {
    font-size: 22px;
}
.tc-stat__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tc-stat__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tc-muted, #74777f);
    line-height: 1.3;
}
.tc-stat__value {
    font-size: 28px;
    font-weight: 800;
    color: var(--tc-on-surface, #191c1e);
    line-height: 1;
}
.tc-stat__trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    width: fit-content;
}
.tc-stat__trend .material-symbols-outlined { font-size: 14px; }
.tc-stat__trend--up   { background: rgba(16,185,129,.12); color: #10b981; }
.tc-stat__trend--down { background: rgba(186,26,26,.12);  color: #ba1a1a; }

html.dark .tc-stat {
    border-color: var(--tc-outline);
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
}
html.dark .tc-stat__value {
    color: var(--tc-on-surface, #e8eaed);
}

/* ===== HashID ===== */
.tc-hash-id {
    font-family: monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--tc-accent, #4586e6);
    letter-spacing: 0.03em;
    white-space: nowrap;
}
html.dark .tc-hash-id {
    color: #7badf5;
}
td:has(.tc-hash-id) {
    vertical-align: middle;
}

/* Alinhamento vertical no centro para TODAS as células das tabelas
   padrão do projeto (a classe .verticle-middle já é usada em todas as listagens). */
table.verticle-middle > thead > tr > th,
table.verticle-middle > tbody > tr > td {
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════
   CORES POR MÓDULO RAIZ DO MENU
   ═══════════════════════════════════════════════════════════════════════
   Cada módulo raiz do menu (Cadastros, Operações, Consultas, Segurança) tem
   uma cor própria, que aparece em três lugares:
     1. pastilha do ícone na sidebar (13% da cor em repouso, sólida no aberto);
     2. faixa de 3px logo abaixo da topbar (.tc-mod-faixa);
     3. etiqueta com o nome do módulo acima do título da página.

   O código do módulo ('m01'…'m04') vem do PHP: moduloCodigo() em
   elements/funcoes.php escreve data-mod nos itens da sidebar e data-mod-ativo
   no .tc-shell. A chave é o NOME do módulo, nunca a posição no menu — ver o
   comentário em funcoes.php.

   Escolha das cores: luminosidade parecida entre todas (nenhuma pula na
   frente), matizes distantes entre módulos vizinhos no menu, saturação média
   para não brigar com as cores semânticas (sucesso/alerta/erro) do sistema.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --m01: #5a7391;   /* Cadastros — azul-ardósia */
    --m02: #b8703f;   /* Operações — terracota    */
    --m03: #3f9a67;   /* Consultas — verde        */
    --m04: #7a68cf;   /* Segurança — violeta      */
}

/* Tema escuro: as cores do tema claro ficam ilegíveis sobre fundo escuro.
   Não é inversão mecânica — sobe a luminosidade e baixa um pouco a saturação. */
html.dark {
    --m01: #8ba3bd;
    --m02: #d99a6e;
    --m03: #6cc194;
    --m04: #a596e8;
}

/* CSS não mapeia atributo em variável sozinho: a tabela precisa ser explícita,
   uma linha por módulo. Ao acrescentar um módulo, acrescente as três linhas
   (token no :root, token no html.dark e o par de seletores abaixo). */
[data-mod="m01"] { --cor-mod: var(--m01); }
[data-mod="m02"] { --cor-mod: var(--m02); }
[data-mod="m03"] { --cor-mod: var(--m03); }
[data-mod="m04"] { --cor-mod: var(--m04); }

.tc-shell[data-mod-ativo="m01"] { --cor-mod: var(--m01); }
.tc-shell[data-mod-ativo="m02"] { --cor-mod: var(--m02); }
.tc-shell[data-mod-ativo="m03"] { --cor-mod: var(--m03); }
.tc-shell[data-mod-ativo="m04"] { --cor-mod: var(--m04); }

/* ── 1. Pastilha do ícone na sidebar ────────────────────────────────────
   Colore TODOS os módulos em repouso (é isto que tira o branco do menu),
   e não só o que está aberto. */
.tc-nav-group[data-mod] > .tc-nav-group-label .tc-grp-label-inner > i,
.tc-nav-group[data-mod] > .tc-nav-group-label .tc-grp-label-inner > .material-symbols-outlined,
.tc-nav-item[data-mod] > i,
.tc-nav-item[data-mod] > .material-symbols-outlined {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px !important;
    background: color-mix(in srgb, var(--cor-mod) 13%, transparent);
    color: var(--cor-mod);
}

/* Grupo aberto inverte: pastilha sólida, ícone branco, rótulo na cor. */
.tc-nav-group--mod-ativo > .tc-nav-group-label .tc-grp-label-inner > i,
.tc-nav-group--mod-ativo > .tc-nav-group-label .tc-grp-label-inner > .material-symbols-outlined,
.tc-nav-item[data-mod].tc-nav-item--active > i,
.tc-nav-item[data-mod].tc-nav-item--active > .material-symbols-outlined {
    background: var(--cor-mod);
    color: #fff;
}
.tc-nav-group--mod-ativo > .tc-nav-group-label .tc-grp-label-text,
.tc-nav-item[data-mod].tc-nav-item--active > .tc-nav-item__label {
    color: var(--cor-mod);
    font-weight: 700;
}

/* Sidebar colapsada: sobra só a pastilha, que não pode encolher junto com o
   rótulo. A classe de colapso fica no <html>, então os seletores precisam do
   prefixo html.tc-sidebar-collapsed para vencer as regras do titan.css. */
html.tc-sidebar-collapsed .tc-nav-group[data-mod] > .tc-nav-group-label .tc-grp-label-inner > i,
html.tc-sidebar-collapsed .tc-nav-group[data-mod] > .tc-nav-group-label .tc-grp-label-inner > .material-symbols-outlined,
html.tc-sidebar-collapsed .tc-nav-item[data-mod] > i,
html.tc-sidebar-collapsed .tc-nav-item[data-mod] > .material-symbols-outlined {
    width: 28px;
    min-width: 28px;
    height: 28px;
    font-size: 15px !important;
    margin: 0 auto;
}

/* ── 2. Faixa de 3px sob a topbar ───────────────────────────────────────
   Renderizada em elements/header.php como bloco no fluxo, irmão da topbar.
   z-index acima do da topbar (40): a topbar tem backdrop-filter e, sem isso,
   comeria a faixa. */
.tc-mod-faixa {
    flex: 0 0 3px;
    height: 3px;
    position: relative;
    z-index: 41;
    background: var(--cor-mod);
}

/* ── 3. Etiqueta com o nome do módulo acima do título da página ─────────
   O pseudo-elemento fica DENTRO do <h2 class="tc-page-header-title">, não no
   .tc-page-header: o contêiner é display:flex + justify-content:space-between,
   e ali o pseudo viraria uma coluna ao lado do botão de ação em vez de uma
   linha acima do título.
   O maiúsculo é do CSS (text-transform), que trata acento corretamente —
   strtoupper() do PHP sem mbstring destruiria "Operações"/"Segurança". */
.tc-shell[data-mod-ativo] .tc-page-header-title {
    border-left: 3px solid var(--cor-mod);
    padding-left: 10px;
}
.tc-shell[data-mod-ativo] .tc-page-header-title::before {
    content: var(--tc-mod-nome);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.2;
    margin-bottom: 3px;
    text-transform: uppercase;
    color: var(--cor-mod);
}