/* 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);
}
/* TRAVA: titulo escrito como TEXTO SOLTO dentro do .accordion-header, sem o
   <span class="accordion-header-text">. O vendor (style.css) poe "color:#333" no
   proprio .accordion-header e so o desfaz em [data-theme-version="dark"] -- seletor
   que este projeto nao usa (usamos html.dark). Resultado: cinza escuro sobre fundo
   escuro, ilegivel. As regras acima so alcancam o <span>, por isso o texto solto
   escapava. O delivery_form.php era a unica tela assim (11/10/2026) e foi corrigida,
   mas a regra fica para a proxima -- o esquecimento nao tem sintoma no tema claro. */
html.dark .accordion-rounded-stylish .accordion-header,
html.dark .accordion-bordered .accordion-header {
  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;
}

/* ===== Chevron padrao dos accordions =====
   Usa o <span class="accordion-header-indicator"> ja presente no header.
   Fechado (.collapsed) -> aponta para a direita ">"; aberto -> para baixo "v".
   Desenhado com borda (sem depender de Font Awesome). O Bootstrap alterna a
   classe .collapsed no proprio .accordion-header (o elemento data-bs-toggle). */
.accordion-rounded-stylish .accordion-header .accordion-header-indicator,
.accordion-bordered .accordion-header .accordion-header-indicator {
  margin-left: auto;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--tc-on-surface, #191c1e);
  opacity: 0.5;
  transform: rotate(-45deg);            /* fechado: seta para a direita */
  transition: transform 0.25s ease;
}
.accordion-rounded-stylish .accordion-header:not(.collapsed) .accordion-header-indicator,
.accordion-bordered .accordion-header:not(.collapsed) .accordion-header-indicator {
  transform: rotate(45deg);             /* aberto: seta para baixo */
}
html.dark .accordion-rounded-stylish .accordion-header .accordion-header-indicator,
html.dark .accordion-bordered .accordion-header .accordion-header-indicator {
  color: var(--tc-on-surface, #e8eaed);
}

/* ===== 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;
}
/* Dashboard: cards de grafico com altura igual por linha (impede sobreposicao
   quando um card tem grafico 300px e o vizinho esta em empty-state ~220px). */
.tc-dash-charts > [class*="col-"] > .card {
  height: 100%;
  margin-bottom: 0;
}

.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;
}
/* Listas dentro de cards (Aniversariantes, Atacadistas) — herdam cor fixa do Bootstrap e somem no dark */
html.dark .list-group-item {
    background-color: transparent !important;
    color: var(--tc-on-surface) !important;
    border-color: var(--tc-outline) !important;
}
html.dark .list-group-item .text-muted {
    color: var(--tc-muted) !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 — Select2 (multi-select dos filtros) =====
   O select2 substitui o <select multiple> por markup proprio (.select2-*), que
   NAO herda as regras de .form-select acima. O tema DevExpress so traz dark em
   body[data-theme-version="dark"] -- seletor que este projeto nao usa (aqui o
   dark e html.dark), entao a caixa e o dropdown ficavam BRANCOS enquanto o texto
   das opcoes herdava a cor clara do body: lista ilegivel (Extrato de Caixa,
   Livro Caixa e Fluxo de Caixa). */
html.dark .select2-container--default .select2-selection--multiple,
html.dark .select2-container--default .select2-selection--single {
    background-color: #2a2d32 !important;
    border-color: var(--tc-outline) !important;
    color: var(--tc-on-surface) !important;
}
html.dark .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--tc-on-surface) !important;
}
html.dark .select2-container--default .select2-selection--single .select2-selection__placeholder,
html.dark .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: var(--tc-muted) !important;
}
html.dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--tc-on-surface) transparent transparent transparent !important;
}
/* Pastilhas das formas ja escolhidas */
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(255, 255, 255, .10) !important;
    border-color: var(--tc-outline) !important;
    color: var(--tc-on-surface) !important;
}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--tc-muted) !important;
}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--tc-on-surface) !important;
}
/* Dropdown: o corpo branco era o problema principal */
html.dark .select2-dropdown {
    background-color: var(--tc-surface, #23262b) !important;
    border-color: var(--tc-outline) !important;
    color: var(--tc-on-surface) !important;
}
html.dark .select2-results__option {
    background-color: transparent !important;
    color: var(--tc-on-surface) !important;
}
html.dark .select2-container--default .select2-results__option--highlighted[aria-selected],
html.dark .select2-container--default .select2-results__option--highlighted {
    background-color: var(--tc-accent, #4586e6) !important;
    color: #fff !important;
}
html.dark .select2-container--default .select2-results__option[aria-selected="true"],
html.dark .select2-results__option--selected {
    background-color: rgba(255, 255, 255, .08) !important;
    color: var(--tc-on-surface) !important;
}
/* Campo de busca dentro da caixa e dentro do dropdown */
html.dark .select2-search--dropdown .select2-search__field,
html.dark .select2-container--default .select2-search--inline .select2-search__field,
html.dark .select2-search__field {
    background-color: #2a2d32 !important;
    border-color: var(--tc-outline) !important;
    color: var(--tc-on-surface) !important;
}
html.dark .select2-container--default.select2-container--focus .select2-selection--multiple,
html.dark .select2-container--default .select2-selection--single:focus {
    border-color: var(--tc-accent, #4586e6) !important;
}

/* ===== 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;
}

/* ============================================================
   KPI cards modernos (renderCard) — gradiente + ícone em quadro
   Usados em todos os dashboards. A cor vem da classe bg-* legada.
   ============================================================ */
.tc-kpi {
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 16px;
    color: #fff;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12);
    background: linear-gradient(135deg, #4361ee, #3a0ca3);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tc-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(16, 24, 40, 0.18);
}
.tc-kpi__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
/* permite o texto encolher no flex (senao o valor estoura e quebra) */
.tc-kpi__text {
    min-width: 0;
    flex: 1 1 auto;
}
.tc-kpi__value {
    /* fonte responsiva: encolhe em cards estreitos para nao quebrar o valor em 2 linhas */
    font-size: clamp(1.15rem, 0.8rem + 0.9vw, 1.6rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 4px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-kpi__label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    opacity: .92;
    color: #fff;
}
.tc-kpi__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
}
/* Paleta dos KPIs por classe bg-* (escopo .tc-kpi para não vazar) */
.tc-kpi.bg-success   { background: linear-gradient(135deg, #2bb673, #11935b); }
.tc-kpi.bg-primary   { background: linear-gradient(135deg, #4361ee, #3a0ca3); }
.tc-kpi.bg-info      { background: linear-gradient(135deg, #21c1d6, #0e8aa0); }
.tc-kpi.bg-secondary { background: linear-gradient(135deg, #708090, #4b5563); }
.tc-kpi.bg-danger    { background: linear-gradient(135deg, #f5576c, #d62246); }
.tc-kpi.bg-warning   { background: linear-gradient(135deg, #f7a823, #e8850c); }
.tc-kpi.bg-dark      { background: linear-gradient(135deg, #3a4256, #1f2433); }

/* ============================================================
   Mini-KPIs informativos (resumo abaixo do filtro nas telas de
   consulta). Use renderMiniKpis($cards) — ver elements/funcoes.php.
   ============================================================ */
.tc-minikpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.tc-minikpi {
    background: var(--tc-card-bg, #fff);
    border: 1px solid var(--tc-border, #e6e8ec);
    border-left: 4px solid var(--mk, #4361ee);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.tc-minikpi__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--mk, #4361ee);
    background: color-mix(in srgb, var(--mk, #4361ee) 14%, transparent);
}
.tc-minikpi__text { min-width: 0; }
.tc-minikpi__value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--tc-text, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tc-minikpi__label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--tc-text-muted, #6b7280);
}
html.dark .tc-minikpi {
    background: var(--tc-card-bg, #1b2130);
    border-color: var(--tc-border, #2a3142);
}
html.dark .tc-minikpi__value { color: #e8eaf0; }

/* ==========================================================================
 * TcTouchMenu — cardapio touch (grupos -> produtos), estilo app.
 * Usado em comanda_item.php (restaurante) e pdv.php (balcao). Mobile-first.
 * ========================================================================== */
.tc-tm { min-height: 120px; }
.tc-tm__msg { text-align: center; color: var(--tc-text-muted, #6b7280); padding: 28px 8px; }
.tc-tm__msg--vazio { font-style: italic; }

.tc-tm__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
/* No celular: 2 colunas garantidas, alvos grandes */
@media (max-width: 575px) {
    .tc-tm__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ---- Card de GRUPO ---- */
.tc-tm__group {
    position: relative;
    border: 0;
    border-radius: 16px;
    min-height: 104px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    color: #fff;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.14);
    transition: transform .08s ease, box-shadow .12s ease;
}
.tc-tm__group::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 100%);
}
.tc-tm__group:active { transform: scale(.97); }
.tc-tm__group-ini {
    position: absolute; top: 10px; right: 12px;
    font-size: 30px; font-weight: 800; opacity: .28; line-height: 1; z-index: 1;
}
.tc-tm__group-nome {
    position: relative; z-index: 2;
    font-size: 15px; font-weight: 700; line-height: 1.15;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
    word-break: break-word;
}

/* ---- Barra de voltar / breadcrumb ---- */
.tc-tm__bar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; flex-wrap: wrap;
}
.tc-tm__back {
    border: 1px solid var(--tc-border, #d2d5da);
    background: var(--tc-card-bg, #fff);
    color: var(--tc-text, #1f2937);
    border-radius: 10px; padding: 8px 14px; min-height: 42px;
    font-weight: 600; cursor: pointer;
}
.tc-tm__back:active { transform: scale(.97); }
.tc-tm__crumb { font-weight: 700; color: var(--tc-text, #1f2937); }

/* ---- Card de PRODUTO ---- */
.tc-tm__grid--prod { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
@media (max-width: 575px) { .tc-tm__grid--prod { grid-template-columns: repeat(2, 1fr); } }
.tc-tm__prod {
    border: 1px solid var(--tc-border, #d2d5da);
    border-radius: 12px;
    min-height: 92px;
    padding: 12px;
    display: flex; flex-direction: column; justify-content: space-between;
    text-align: left;
    background: var(--tc-card-bg, #fff);
    color: var(--tc-text, #1f2937);
    cursor: pointer;
    transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.tc-tm__prod:active { transform: scale(.97); }
.tc-tm__prod.is-added {
    border-color: #198754;
    box-shadow: 0 0 0 3px rgba(25,135,84,.25) inset;
}
.tc-tm__prod-nome { font-weight: 600; font-size: 14px; line-height: 1.2; }
.tc-tm__prod-preco { font-weight: 700; color: #198754; margin-top: 8px; font-size: 15px; }

html.dark .tc-tm__back { background: var(--tc-card-bg, #1f2431); border-color: var(--tc-border, #384056); color: #e8eaf0; }
html.dark .tc-tm__crumb { color: #e8eaf0; }
html.dark .tc-tm__prod { background: var(--tc-card-bg, #1f2431); border-color: var(--tc-border, #384056); color: #e8eaf0; }

/* ============================================================
   COR POR MÓDULO — pastilha, faixa e etiqueta
   ------------------------------------------------------------
   A paleta e a tabela  data-mod -> --tc-cor-mod  ficam em
   temas.css. Aqui só o uso visual. A cor entra DILUÍDA de
   propósito: 13% no fundo do ícone, 3px na faixa, um filete e um
   rótulo de 10px. Nada de fundo colorido de tela inteira nem de
   item de menu inteiro pintado.
   ============================================================ */

/* ── 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 grupo que está aberto. */
.tc-nav-group[data-mod] .tc-grp-label-inner > i,
.tc-nav-group[data-mod] .tc-grp-label-inner > .material-symbols-outlined,
.tc-nav-item[data-mod] > i,
.tc-nav-item[data-mod] > .material-symbols-outlined {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    /* Fallback p/ navegador sem color-mix (Chrome < 111): pastilha neutra e
       ícone na cor do módulo — degrada sem perder o sinal de cor. */
    background: rgba(127, 127, 127, 0.10);
    background: color-mix(in srgb, var(--tc-cor-mod) 13%, transparent);
    color: var(--tc-cor-mod);
}

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

/* Sidebar colapsada: sobra só a pastilha, então ela NÃO pode encolher junto
   com o rótulo. Largura, altura e fonte fixas + centralizada.
   A classe de colapso fica no <html>, não na sidebar. */
html.tc-sidebar-collapsed .tc-nav-group[data-mod] .tc-grp-label-inner > i,
html.tc-sidebar-collapsed .tc-nav-group[data-mod] .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;
    height: 28px;
    font-size: 15px;
    margin: 0 auto;
}

/* ── 2. Faixa de 3px sob a topbar ───────────────────────────────
   Bloco no fluxo, irmão da topbar (ver elements/header.php).
   z-index acima do da topbar (40): ela tem backdrop-filter e, sem isso,
   "come" a faixa. */
.tc-mod-faixa {
    height: 3px;
    flex-shrink: 0;               /* .tc-main-wrapper é flex-column */
    background: var(--tc-cor-mod, transparent);
    position: relative;
    z-index: 41;
}

/* ── 3. Etiqueta com o nome do módulo acima do título ────────────
   Entra por CSS: o cabeçalho de página é escrito à mão em ~130 telas e
   nenhuma precisa ser editada. O seletor exige o data-mod-ativo no shell,
   então tela sem módulo (Meu Perfil, impressão) fica intacta. */
.tc-shell[data-mod-ativo] .tc-page-header-title {
    border-left: 3px solid var(--tc-cor-mod);
    padding-left: 10px;
}
/* O pseudo mora DENTRO do próprio <h2> do título, NÃO no .tc-page-header:
   aquele container é display:flex; justify-content:space-between e o pseudo
   viraria uma COLUNA ao lado do botão de ação, em vez de uma linha acima do
   título. Dentro do título, com display:block, ele empilha certo. */
.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.10em;
    line-height: 1.1;
    margin-bottom: 3px;
    color: var(--tc-cor-mod);
    /* MAIÚSCULO é do CSS, que trata acento corretamente. O PHP manda o nome
       como veio: strtoupper() sem mbstring destruiria "Movimentação". */
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   AJUSTES 08/09/2026 — laudo docsclaude/laudo_ajustes_08092026.md
   ═══════════════════════════════════════════════════════════════════ */

/* ── A. Spinner de input numérico (itens 11, 13, 14b, 17a, 18a, 19, 22a) ──
   O documento pediu "retirar o spin" em 9 telas diferentes (Importar XML,
   Sangria, Fechamento de Caixa, OS, Ordem de Produção, Apontamento, Movimento
   por Produto, Receita/Lentes). São 28 <input type="number"> espalhados — mas
   o spinner é decoração do navegador, então uma regra global resolve todas de
   uma vez e vale para qualquer tela futura. O type="number" é PRESERVADO: o
   teclado numérico no celular e a validação continuam funcionando; some apenas
   a setinha, que atrapalhava a digitação e roubava largura do campo. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;      /* Firefox */
    appearance: textfield;
}

/* ── B. Utilitários claros do Bootstrap no dark mode (item 8) ──
   O "Ver Pedidos" do Romaneio usa .bg-light, que é branco FIXO no Bootstrap.
   Como o tema escuro deste projeto é o html.dark do TitanPHP (e não o
   data-bs-theme do Bootstrap), o fundo continuava branco enquanto o texto
   herdava a cor clara do tema — texto claro sobre branco, ilegível.
   Vale para qualquer tela que use esses utilitários, não só o romaneio. */
/* :not(.badge) de proposito: `badge bg-light text-dark` e uma escolha DELIBERADA de
   contraste em ~32 pontos do sistema (chips de tipo de documento, status). Aqui queremos
   corrigir apenas as SUPERFICIES claras -- linha de detalhe, painel, bloco de codigo. */
html.dark .bg-light:not(.badge),
html.dark .bg-white:not(.badge),
html.dark .table-light,
html.dark .table-light > :not(caption) > * > * {
    background-color: var(--tc-surface-low, #1b2130) !important;
    color: var(--tc-on-surface, #e6e9ef) !important;
}
html.dark .table-light,
html.dark .bg-light:not(.badge) {
    border-color: var(--tc-outline, #2c3444) !important;
}
/* .text-dark dentro de area escurecida ficaria preto sobre escuro. */
html.dark .bg-light:not(.badge) .text-dark,
html.dark .table-light .text-dark {
    color: var(--tc-on-surface, #e6e9ef) !important;
}

/* ── C. Dropdown cortado dentro de grid (itens 20 e 22c) ──
   O menu "Ações" da OS tem 11 itens e vive dentro de .table-responsive, que
   aplica overflow-x:auto — o overflow recorta o menu, e nas últimas linhas da
   grid ele some quase inteiro. Enquanto um menu está aberto, libera o overflow
   do container. O :has() é suportado por todos os navegadores atuais; o bloco
   seguinte (.dropdown-menu.show com position:fixed via Popper) é o reforço
   para quem não suportar. Mesmo problema no fim do accordion da OS, onde o
   dropdown do autolookup era cortado pela borda da aba. */
.table-responsive:has(.dropdown-menu.show),
.table-responsive:has(.tc-alk-drop[style*="block"]),
.accordion-body-text:has(.tc-alk-drop[style*="block"]) {
    overflow: visible;
}

/* ── D. Legibilidade do autolookup (item 21) ──
   .tc-alk-drop (tc-autolookup.js) pinta o fundo com var(--bs-body-bg, #fff),
   mas os itens não definiam color — herdavam a cor clara do tema escuro e
   ficavam ilegíveis sobre o branco do fallback. Aqui o dropdown passa a usar
   os tokens do tema do projeto, que existem nos dois modos. */
.tc-alk-drop {
    background: var(--tc-surface, #fff) !important;
    border-color: var(--tc-outline, #d2d5da) !important;
    color: var(--tc-on-surface, #212529);
}
.tc-alk-item,
.tc-alk-drop .tc-alk-item small {
    color: var(--tc-on-surface, #212529);
}
.tc-alk-item small {
    opacity: .7;
}
/* O item ativo/hover mantém o azul sólido com texto branco (contraste alto). */
.tc-alk-item:hover,
.tc-alk-item.active,
.tc-alk-item:hover small,
.tc-alk-item.active small {
    color: #fff;
}
.tc-alk-empty,
.tc-alk-loading {
    color: var(--tc-muted, #74777f);
}

/* ── E. "Quantidade calculada" do modal de medidas (item 5b) ──
   Era text-muted small: o número mais importante do modal era o menos visível. */
.tc-med-qtdcalc {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--tc-primary, #0d6efd);
    line-height: 1.1;
}
html.dark .tc-med-qtdcalc {
    color: #6ea8fe;
}
.tc-med-qtdcalc-box {
    border: 1px dashed var(--tc-outline, #d2d5da);
    border-radius: 8px;
    padding: 8px 12px;
    background: var(--tc-surface-low, #f6f7f9);
}

/* Bloco F (barra de feedback) REMOVIDO em 08/09/2026 -- ver bloco G abaixo. */

/* ── G. Último item lido: etiqueta na grade + linha piscando (08/09/2026) ──
   Substitui a faixa clara que ficava ACIMA do campo de código de barras. Aquela faixa
   (.alert-secondary) tinha largura, altura, raio e ícone de um campo de texto e, no tema
   escuro, era o elemento MAIS CLARO da tela — enquanto o campo real, escuro, parecia
   desabilitado. O operador olhava e digitava nela. A instrução de uso já vive no
   placeholder do campo; a confirmação do item passou para cá, longe da zona de digitação.
   Vale para a Inclusão de Movimento e para o PDV. */

.tc-grade-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 2px 4px 8px;
}
.tc-grade-titulo {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tc-muted, #74777f);
}

/* Forma de ETIQUETA — pílula estreita e colorida. Nenhum campo do sistema tem esse
   formato, então ela não volta a ser confundida com entrada de dados. */
.tc-chip-ultimo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(25, 135, 84, .10);
    border: 1px solid rgba(25, 135, 84, .35);
    color: #146c43;
}
/* Caractere Unicode, não glyph do Font Awesome: se a fonte de ícones não carregar,
   um \f00c vira quadrado vazio dentro da etiqueta. O ✓ existe em qualquer fonte. */
.tc-chip-ultimo::before {
    content: "\2713";
    font-size: 11px;
    opacity: .9;
}
html.dark .tc-chip-ultimo {
    background: rgba(52, 211, 153, .13);
    border-color: rgba(52, 211, 153, .32);
    color: #6ee7b7;
}

/* A linha recém-inserida pisca na própria grade: confirma o item ONDE ele passa a
   existir, que é onde o operador confere o pedido.

   ATENÇÃO ao mecanismo: o Bootstrap 5.2 pinta a listra do .table-striped com
   `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)` POR CIMA do background-color
   da célula. Animar background-color aqui não funcionaria — o destaque sumiria justamente
   nas linhas ímpares (as listradas) e apareceria só nas pares. Por isso a animação usa o
   MESMO box-shadow inset: durante o flash ele substitui a listra e, ao terminar, a listra
   do Bootstrap volta sozinha. Vale para os dois temas — o verde funciona nos dois grounds,
   então não há variante html.dark. */
.tc-linha-nova > td {
    animation: tcLinhaNova 1.9s ease-out;
}
@keyframes tcLinhaNova {
    0%, 42% { box-shadow: inset 0 0 0 9999px rgba(16, 185, 129, .16); }
    100%    { box-shadow: inset 0 0 0 9999px rgba(16, 185, 129, 0); }
}
/* Barra na borda esquerda: some empilhada no MESMO box-shadow, senão sobrescreveria
   o inset da listra e a primeira célula perderia o fundo. */
.tc-linha-nova > td:first-child {
    animation-name: tcLinhaNovaBarra;
}
@keyframes tcLinhaNovaBarra {
    0%, 42% { box-shadow: inset 3px 0 0 var(--tc-success, #10b981),
                          inset 0 0 0 9999px rgba(16, 185, 129, .16); }
    100%    { box-shadow: inset 3px 0 0 rgba(16, 185, 129, 0),
                          inset 0 0 0 9999px rgba(16, 185, 129, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .tc-linha-nova > td { animation: none; }
}

/* ── H. Grade de itens do movimento no celular: nome do produto em linha própria ──
   (12/09/2026 — vale para a Inclusão de Movimento e para o PDV, as duas telas que usam
   #gridItens com as linhas montadas por renderItens() do movimento_engine.)

   O problema: são 8 colunas (marcar, #, produto, qtd, unit., desc., total, ações) para
   ~300px úteis. O nome do produto ficava num filete de ~90px e quebrava em cinco ou seis
   linhas ("CAIXA / DE / PASSAGEM / AR / CONDICIONADO / GRANDE / PRETO"), esticando a
   altura da linha e ainda assim deixando Total e Ações fora da área visível — o operador
   rolava a tabela de lado para conferir o que acabou de lançar.

   A correção NÃO mexe no HTML gerado: abaixo de md a mesma <tr> vira um grid de 12
   colunas em três faixas —

       [✓] [#] NOME DO PRODUTO ....................................... [⋯]
       [− 1,00 +] ..................................... Total  4.480,00
       Unit. 560,00 ...................................... Desc.  0,00

   O nome ganha a largura toda; embaixo vem primeiro o par que o operador confere
   (quantidade e total) e só depois o detalhe (unitário e desconto). Faixas 2 e 3 têm uma
   linha cada — o rótulo é inline, não empilhado — então a linha inteira fica mais baixa
   do que a versão espremida que ela substitui. Nada some, só muda de lugar; acima de md
   a tabela continua sendo uma tabela.

   Detalhes que não são estéticos:
   - `gap: 0` de propósito. A listra do .table-striped é pintada célula a célula
     (box-shadow inset, ver bloco G); com espaçamento entre células apareceriam frestas
     sem listra dentro da linha. O respiro vem do padding das células.
   - Não zerar o box-shadow das células: é nele que roda o flash da linha recém-inserida
     (.tc-linha-nova). Um `box-shadow: none !important` aqui mataria a animação.
   - O <thead> some (os rótulos viram ::before nas próprias células) porque cabeçalho de
     tabela não acompanha célula que mudou de lugar. */

@media (max-width: 767.98px) {
    #gridItens,
    #gridItens > tbody            { display: block; width: 100%; }
    #gridItens > thead            { display: none; }

    #gridItens > tbody > tr {
        display: grid;
        /* minmax(0,...) e NAO 1fr puro: `1fr` = `minmax(auto,1fr)`, cujo minimo e o
           min-content da celula. Com nome de produto longo e o stepper de quantidade
           dentro, esse minimo estoura a largura e a linha sai pela direita (Total,
           Desc. e Acoes ficam fora da tela, que e exatamente o que se queria corrigir). */
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 0;
        align-items: center;
        border-bottom: 1px solid var(--tc-outline, #e5e8ee);
    }
    #gridItens > tbody > tr > td {
        display: block;
        border: 0 !important;
        padding: .15rem .3rem !important;
        min-width: 0;                       /* deixa o nome longo quebrar dentro da célula */
    }

    /* Faixa 1 — marcar | # | nome do produto | menu de ações */
    #gridItens > tbody > tr > td:nth-child(1) { grid-row: 1; grid-column: 1  / span 1; }
    #gridItens > tbody > tr > td:nth-child(2) { grid-row: 1; grid-column: 2  / span 1; }
    #gridItens > tbody > tr > td:nth-child(3) { grid-row: 1; grid-column: 3  / span 8;
                                                overflow-wrap: anywhere; }
    #gridItens > tbody > tr > td:nth-child(8) { grid-row: 1; grid-column: 11 / span 2;
                                                text-align: right !important; }

    /* Faixa 2 — quantidade (stepper) | total */
    #gridItens > tbody > tr > td:nth-child(4) { grid-row: 2; grid-column: 1 / span 6;
                                                text-align: left !important; }
    #gridItens > tbody > tr > td:nth-child(7) { grid-row: 2; grid-column: 7 / span 6; }

    /* Faixa 3 — unitário | desconto */
    #gridItens > tbody > tr > td:nth-child(5) { grid-row: 3; grid-column: 1 / span 6;
                                                text-align: left !important; }
    #gridItens > tbody > tr > td:nth-child(6) { grid-row: 3; grid-column: 7 / span 6; }

    /* Rótulos: sem <thead>, o número sozinho não diz o que é. Inline (não `block`) para
       que cada faixa continue ocupando uma linha só. */
    #gridItens > tbody > tr > td:nth-child(5)::before { content: "Unit."; }
    #gridItens > tbody > tr > td:nth-child(6)::before { content: "Desc."; }
    #gridItens > tbody > tr > td:nth-child(7)::before { content: "Total"; }
    #gridItens > tbody > tr > td:nth-child(5)::before,
    #gridItens > tbody > tr > td:nth-child(6)::before,
    #gridItens > tbody > tr > td:nth-child(7)::before {
        font-size: .62rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        margin-right: .35rem;
        color: var(--tc-muted, #7a8397);
    }

    /* A linha vazia ("Nenhum item.") é uma célula só, com colspan — ocupa a faixa toda. */
    #gridItens > tbody > tr > td[colspan] {
        grid-row: 1 !important;
        grid-column: 1 / -1 !important;
        text-align: center !important;
    }
}

/* ── I. Barra de ações do movimento/PDV no celular: só ícones, alvo de toque maior ──
   (12/09/2026 — complementa o bloco H.)

   Abaixo de md os rótulos dos botões da barra saem (ficam no `title` e no menu Opções) e
   resta o ícone. Com o texto fora, o botão encolhia para ~34px de largura — menos que os
   44px que a diretriz de toque pede, e a fileira ainda quebrava linha, jogando o Opções
   sozinho numa segunda faixa. Aqui eles voltam a ter corpo: cinco botões de 50px com 8px
   de intervalo cabem em uma linha só num aparelho de 360px.

   Escopo proposital em `.tc-barra-acao`, NÃO em `.tc-page-header`: esta última é o
   cabeçalho de todas as ~30 telas de listagem, onde os botões ("Novo Registro", "Filtrar")
   continuam com texto e não devem engordar. */

@media (max-width: 767.98px) {
    .tc-barra-acao .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 50px;
        min-height: 38px;
        padding-inline: .7rem;
    }
    /* O `me-1` do ícone sobra quando o rótulo ao lado está oculto — sem isso o glifo fica
       fora do centro do botão. */
    .tc-barra-acao .btn > i { margin-right: 0 !important; }
    /* O contador do rascunho continua ao lado do ícone do Gravar: é ele que diz quantos
       itens ainda estão só no navegador, e no celular é a única indicação restante. */
    .tc-barra-acao .btn > .badge { margin-left: .35rem !important; }
}

/* ── J. Linha de fases da produção (.tc-steps) ──────────────────────────────
   (24/09/2026)

   A sequência de etapas do fluxo em bolinhas: feitas em verde (ou na cor da própria
   etapa, quando cadastrada), a atual em azul com halo, as pendentes em cinza. Nasceu na
   listagem de pedidos da marmoraria (`.mrm-steps`, em elements/mrm_modais_orcamento.php)
   e veio para o core para servir também ao Apontamento e à Ordem de Produção — o desenho
   é o mesmo, muda só de onde vêm as etapas (lá o servidor manda prontas, aqui o
   tc-fases.js monta no navegador a partir do fluxo da linha).

   Dark mode sai de graça: as cores vêm dos tokens --tc-* que o titan.css redefine em
   `html.dark`. Só o verde do "feito" e o azul do "atual" são literais — são semânticos,
   valem nos dois temas. */

.tc-steps { display: flex; align-items: flex-start; }

.tc-st {
    --tc-st-cor: #0e9f6e;            /* sobrescrito inline pela cor da etapa */
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 54px;
    position: relative;
}
.tc-st i {
    width: 13px; height: 13px;
    border-radius: 50%;
    border: 2px solid var(--tc-outline, #b9bec8);
    background: var(--tc-surface, #fff);
    display: block;
    z-index: 1;
}
.tc-st small {
    display: block;
    font-size: 9px;
    color: var(--tc-muted, #6b7079);
    white-space: nowrap;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* O traço que liga uma bolinha à anterior. */
.tc-st:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 5.5px; right: 50%;
    width: 100%; height: 2px;
    background: var(--tc-outline, #b9bec8);
}
.tc-st.done i { background: var(--tc-st-cor); border-color: var(--tc-st-cor); }
.tc-st.done::before, .tc-st.cur::before { background: #0e9f6e !important; }
.tc-st.cur i {
    border-color: var(--tc-accent, #4586e2);
    background: rgba(69, 134, 226, .18);
    box-shadow: 0 0 0 3px rgba(69, 134, 226, .18);
}
.tc-st.cur small { color: var(--tc-accent, #4586e2); font-weight: 600; }

/* OP/plano cancelado: a linha continua legível, mas apagada. */
.tc-steps-canc { opacity: .45; }

/* Marco vencido e não cumprido (trilha de datas da OS): a data prevista já passou e a OS
   não foi finalizada/entregue. É o único aviso de atraso que a tela tem — por isso a
   bolinha muda de cor, e não só o texto. (30/09/2026) */
.tc-st.late i {
    border-color: #ba1a1a;
    background: rgba(186, 26, 26, .16);
    box-shadow: 0 0 0 3px rgba(186, 26, 26, .14);
}
.tc-st.late small { color: #ba1a1a; font-weight: 700; }

/* Variante compacta para dentro de célula de grade: só as bolinhas, sem os nomes (que
   continuam no `title` de cada uma). Cabe numa coluna estreita sem esticar a linha. */
.tc-steps-mini .tc-st       { width: 22px; gap: 0; }
.tc-steps-mini .tc-st small { display: none; }
.tc-steps-mini .tc-st i     { width: 10px; height: 10px; }
.tc-steps-mini .tc-st:not(:first-child)::before { top: 4px; }

/* Segunda linha da bolinha (a data do marco), na trilha grande. */
.tc-st small em {
    display: block;
    font-style: normal;
    font-size: 8.5px;
    opacity: .85;
    font-variant-numeric: tabular-nums;
}

/* Trilha dentro de célula de grade: o nome da etapa embaixo da bolinha (30/09/2026 —
   "poderia colocar uma legenda embaixo das etapas na op, tem espaço na tela"). Sem isso
   a linha dizia em que PONTO a OP está, mas não em que ETAPA, e o nome só aparecia no
   tooltip. O texto quebra em até duas linhas em vez de esticar a coluna: nome de etapa
   real é "CONFERÊNCIA FINAL", e com uma linha só sobraria "CONFERÊN…". */
td .tc-steps:not(.tc-steps-mini) .tc-st { width: 58px; }
td .tc-steps:not(.tc-steps-mini) .tc-st small {
    white-space: normal;
    max-width: 56px;
    line-height: 1.15;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;          /* 2 linhas; o resto fica no title */
    line-clamp: 2;
}

/* ── K. Formulário com resumo fixo ao lado (.tc-of) ─────────────────────────
   (30/09/2026)

   O desenho que a digitação do orçamento de marmoraria estreou e que o Felipe pediu para
   as telas de Ordem de Serviço: conteúdo à esquerda, cartão de resumo grudado à direita
   (totais, andamento, ações). Lá o CSS era inline no orcamentomrm_form.php; aqui ele vira
   core, para as duas telas de OS — e as próximas — usarem o mesmo.

   Abaixo de 1080px vira uma coluna só e o resumo desgruda: num celular um bloco `sticky`
   de 300px come metade da tela e o operador digita no que sobra. */

.tc-of      { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 14px; align-items: start; }
.tc-of-main { display: grid; gap: 12px; min-width: 0; }
.tc-of-sum  { position: sticky; top: 84px; display: grid; gap: 10px; }

@media (max-width: 1080px) {
    .tc-of     { grid-template-columns: 1fr; }
    .tc-of-sum { position: static; }
}

.tc-of-sum .card     { padding: 12px 14px; margin-bottom: 0; }
.tc-of-sum h4 {
    margin: 0 0 8px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tc-muted, #6b7079);
    font-weight: 700;
}
.tc-of-row   { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 2px 0; }
.tc-of-row > span { color: var(--tc-muted, #6b7079); }
.tc-of-row > b    { font-variant-numeric: tabular-nums; font-weight: 600; }
.tc-of-row.tot    { border-top: 1px solid var(--tc-outline, #dfe2e8); margin-top: 5px; padding-top: 7px; }
.tc-of-row.tot b  { font-size: 18px; font-weight: 700; }
.tc-of-acoes { display: grid; gap: 6px; }
.tc-of-acoes .btn { justify-content: center; }

/* ── L. Grade de receita óptica (.tc-rx) ────────────────────────────────────
   (30/09/2026)

   Uma tabela só, com LONGE e PERTO como faixas dentro dela: é o que faz "Esférico" de
   longe e de perto caírem na MESMA coluna, que é como o óptico lê a receita. OD e OE
   ganham cor e crachá — a queixa era justamente não distinguir um do outro.

   As colunas seguem o ufrmLabOrdemServico: Esférico, Cilíndrico, Eixo, Adição, DNP e ACO
   (ACO é odpupilar/oepupilar, conferido pelas coordenadas do .dfm). O que é invisível no
   legado (prismas, adição e DNP de perto) não é desenhado aqui — decisão do Felipe em
   30/09: "se estiver invisível no legado, tem que funcionar da mesma forma no web". */

.tc-rx { border: 1px solid var(--tc-outline, #dfe2e8); border-radius: 10px; overflow: hidden; }

.tc-rx-h {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 10px;
    background: var(--tc-surface-low, #f2f4f6);
    border-bottom: 1px solid var(--tc-outline, #dfe2e8);
}
.tc-rx-h .tc-rx-acoes { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

table.tc-rx-t { width: 100%; border-collapse: collapse; margin: 0; }
table.tc-rx-t th {
    font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tc-muted, #6b7079); font-weight: 700;
    padding: 6px 5px; text-align: center; white-space: nowrap;
    border: 0;
}
table.tc-rx-t th.eye { width: 54px; text-align: left; padding-left: 10px; }
table.tc-rx-t td      { padding: 3px 5px; border: 0; }
table.tc-rx-t td.eye  { padding-left: 10px; }
/* Faixa "LONGE" / "PERTO" dentro da própria tabela. */
table.tc-rx-t td.tc-rx-faixa {
    padding: 4px 10px;
    font-size: 10px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
    color: var(--tc-muted, #6b7079);
    background: var(--tc-surface-low, #f2f4f6);
}
table.tc-rx-t tr.od td:not(.tc-rx-faixa) { background: rgba(69, 134, 226, .07); }
table.tc-rx-t tr.oe td:not(.tc-rx-faixa) { background: rgba(163, 101, 28, .09); }

.tc-eye {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 22px; border-radius: 5px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: #fff;
}
.tc-eye-od { background: #2f6fd0; }
.tc-eye-oe { background: #a3651c; }

/* Campo de grau: monoespaçado e alinhado à direita, para a vírgula de todos os olhos
   cair na mesma vertical. */
input.tc-grau {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, Consolas, monospace;
    padding-left: 4px; padding-right: 6px;
}
/* Valor que o sistema preencheu (perto calculado a partir do longe + adição). Continua
   editável — no legado também é só um valor gravado, que o operador pode corrigir. */
input.tc-grau.calc {
    background: rgba(69, 134, 226, .10);
    border-color: rgba(69, 134, 226, .45);
}
html.dark table.tc-rx-t tr.od td:not(.tc-rx-faixa) { background: rgba(111, 163, 238, .10); }
html.dark table.tc-rx-t tr.oe td:not(.tc-rx-faixa) { background: rgba(224, 176, 106, .10); }
html.dark input.tc-grau.calc {
    background: rgba(111, 163, 238, .14);
    border-color: rgba(111, 163, 238, .45);
}

/* ===========================================================================
   ApexCharts no DARK MODE — tooltip e legenda legíveis
   ---------------------------------------------------------------------------
   Queixa de 25/09/2026: passando o mouse sobre a barra, no dark, não aparecia
   nada. A caixa do tooltip é desenhada pelo tema CLARO do ApexCharts (fundo
   branco, borda clara) e o texto dentro dela herdava a cor clara do nosso dark
   — branco sobre branco. No light funcionava porque o texto ali é escuro.

   Resolve no CSS de propósito: são 19 gráficos em 7 dashboards, e mexer em
   `tooltip: { theme }` num por um deixaria o próximo gráfico novo com o mesmo
   defeito. Aqui vale para todos, inclusive os que ainda não existem.

   Cobre as três caixas que o ApexCharts desenha: o tooltip da série, o do eixo
   X (aquele que segue o cursor embaixo) e o do eixo Y — cada um com sua setinha,
   que também é desenhada com a cor do tema claro.
   =========================================================================== */
html.dark .apexcharts-tooltip,
html.dark .apexcharts-tooltip.apexcharts-theme-light,
html.dark .apexcharts-tooltip.apexcharts-theme-dark {
    background: #1b2430 !important;
    border: 1px solid #38414f !important;
    color: #e6e9ef !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45) !important;
}
html.dark .apexcharts-tooltip-title {
    background: #232e3d !important;
    border-bottom: 1px solid #38414f !important;
    color: #e6e9ef !important;
    font-weight: 600;
}
html.dark .apexcharts-tooltip-text,
html.dark .apexcharts-tooltip-text-y-label,
html.dark .apexcharts-tooltip-text-y-value,
html.dark .apexcharts-tooltip-text-goals-label,
html.dark .apexcharts-tooltip-text-goals-value,
html.dark .apexcharts-tooltip-text-z-label,
html.dark .apexcharts-tooltip-text-z-value,
html.dark .apexcharts-tooltip-series-group,
html.dark .apexcharts-tooltip-y-group,
html.dark .apexcharts-datalabel-label,
html.dark .apexcharts-datalabel-value {
    color: #e6e9ef !important;
}

/* Tooltip dos eixos: fundo, texto e a setinha (::after = miolo, ::before = borda) */
html.dark .apexcharts-xaxistooltip,
html.dark .apexcharts-yaxistooltip {
    background: #1b2430 !important;
    border-color: #38414f !important;
    color: #e6e9ef !important;
}
html.dark .apexcharts-xaxistooltip-bottom::after { border-bottom-color: #1b2430 !important; }
html.dark .apexcharts-xaxistooltip-bottom::before { border-bottom-color: #38414f !important; }
html.dark .apexcharts-xaxistooltip-top::after     { border-top-color: #1b2430 !important; }
html.dark .apexcharts-xaxistooltip-top::before    { border-top-color: #38414f !important; }
html.dark .apexcharts-yaxistooltip-left::after    { border-left-color: #1b2430 !important; }
html.dark .apexcharts-yaxistooltip-left::before   { border-left-color: #38414f !important; }
html.dark .apexcharts-yaxistooltip-right::after   { border-right-color: #1b2430 !important; }
html.dark .apexcharts-yaxistooltip-right::before  { border-right-color: #38414f !important; }

/* Legenda embaixo do gráfico e rótulos dos eixos: mesma razão, texto escuro
   fixado pelo tema claro do ApexCharts em cima do nosso fundo escuro. */
html.dark .apexcharts-legend-text { color: #c7ccd6 !important; }
html.dark .apexcharts-text tspan,
html.dark .apexcharts-xaxis-label,
html.dark .apexcharts-yaxis-label { fill: #aab2bf; }
html.dark .apexcharts-gridline { stroke: rgba(255, 255, 255, .07); }

/* ===== Pastilhas de recorte (.tc-pill) — dark mode =====
   O MRP (relmrp.php) usa a cor `dark` do Bootstrap na pastilha agregada
   "Criticos". No tema escuro isso vira texto escuro sobre fundo escuro e o
   botao simplesmente some da tela (reportado em 05/10/2026).
   O escopo e .tc-pill de proposito: `btn-dark`/`btn-outline-dark` genericos
   tambem sao usados em movimento_form.php e pdv.php, e nao devem mudar.
   Tokens iguais aos de `html.dark .btn-secondary`, logo acima neste arquivo. */
html.dark .tc-pill.btn-outline-dark {
    color: var(--tc-on-surface, #eceef2) !important;
    border-color: var(--tc-muted, #8b95a8) !important;
}
html.dark .tc-pill.btn-outline-dark:hover {
    background-color: rgba(255, 255, 255, .14) !important;
    border-color: var(--tc-on-surface, #eceef2) !important;
    color: var(--tc-on-surface, #eceef2) !important;
}
html.dark .tc-pill.btn-dark {
    background-color: var(--tc-surface-high, #283246) !important;
    border-color: var(--tc-muted, #8b95a8) !important;
    color: var(--tc-on-surface, #eceef2) !important;
}

/* ===== Lista de clientes do MRP de Reposicao (.tc-cliitem) =====
   Usava a classe `text-body` do Bootstrap, que resolve para --bs-body-color.
   O tema define essa variavel como #969ba0 e NAO a redefine no escuro: o item
   inativo saia cinza apagado sobre o card escuro, quase ilegivel (reportado em
   05/10/2026, com print). Aqui a cor vem dos tokens do tema, que existem nos
   dois modos. Escopado na classe propria -- `text-body` e global do Bootstrap. */
.tc-cliitem {
    color: #1f2937;
    border-left: 3px solid transparent;
}
.tc-cliitem:hover { background: rgba(0, 0, 0, .04); }
.tc-cliitem .text-muted { color: #6b7280 !important; }
.tc-cliitem--on {
    background: var(--tc-primary, #3a56c4);
    color: #fff;
    border-left-color: rgba(255, 255, 255, .55);
}
.tc-cliitem--on .text-muted { color: rgba(255, 255, 255, .75) !important; }
html.dark .tc-cliitem         { color: var(--tc-on-surface, #eceef2); }
html.dark .tc-cliitem:hover   { background: rgba(255, 255, 255, .07); }
html.dark .tc-cliitem .text-muted { color: var(--tc-muted, #8b95a8) !important; }
html.dark .tc-cliitem--on {
    background: var(--tc-surface-high, #283246);
    color: var(--tc-on-surface, #eceef2);
    border-left-color: #5b7cfa;
}
html.dark .tc-cliitem--on .text-muted { color: #b9c4d6 !important; }
/* Quantidade dentro de "Ultimos pedidos": destaque sem depender de --bs-body-color. */
.tc-qtdped          { color: #1f2937; }
html.dark .tc-qtdped { color: var(--tc-on-surface, #eceef2); }