/* ============================================================================
   cc-ui.css — o sistema de design do ERP.
   ----------------------------------------------------------------------------
   Antes deste arquivo, os tokens viviam duplicados inline em dois templates
   (clients/list.php e faturas_telecom/index.php) e o resto do sistema era
   Bootstrap cru. Aqui eles passam a existir uma vez só.

   Convencao de pasta: /assets/... e a viva (spec de modernizacao da O.S.);
   public/css/ e legado morto e nao e referenciado por nada.

   Os tokens ficam em :root de proposito. Quando viviam numa classe raiz, o
   modal do Bootstrap — que o proprio Bootstrap move para fora da arvore da
   pagina — nao enxergava as var() e os botoes dentro dele saiam invisiveis
   (fundo transparente + texto branco). Ver o remendo que isso obrigou em
   clients/list.php:259, removido por este arquivo.
   ========================================================================== */

:root {
    /* Marca. O vermelho tambem e a cor de perigo: no vocabulario da Center,
       excluir e a acao da marca, nao uma cor separada. */
    --cc-red:        #d6242c;
    --cc-red-escuro: #6e1518;
    --cc-red-tinta:  #fdf0f0;

    /* Semanticas. Cada uma com tinta (fundo) e escuro (hover/texto). */
    --cc-ok:            #157347;
    --cc-ok-escuro:     #0f5132;
    --cc-ok-tinta:      #e8f6ee;
    --cc-atencao:       #a16207;
    --cc-atencao-escuro:#7c4a06;
    --cc-atencao-tinta: #fdf3df;
    --cc-info:          #1d5fc4;
    --cc-info-escuro:   #17489a;
    --cc-info-tinta:    #e8f1fd;

    /* Neutros. */
    --cc-ink:   #221b1c;
    --cc-texto: #3d3536;
    --cc-mudo:  #8b8184;
    --cc-papel: #ffffff;
    --cc-fundo: #f7f5f4;
    --cc-fio:   #e9e4e2;

    /* Tipografia. */
    --cc-display:   "Bricolage Grotesque", system-ui, sans-serif;
    --cc-mono-fam:  "IBM Plex Mono", ui-monospace, monospace;

    /* Forma. */
    --cc-raio:    .375rem;
    --cc-raio-lg: .5rem;
}

body {
    background: var(--cc-fundo);
    color: var(--cc-texto);
}

.cc-mono {
    font-family: var(--cc-mono-fam);
    font-size: .8125em;
    letter-spacing: -0.01em;
}

/* ============================ Cabecalho de pagina ======================== */

.cc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.cc-eyebrow {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-mudo);
    margin: 0 0 .125rem;
}
.cc-title {
    font-family: var(--cc-display);
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--cc-ink);
    margin: 0;
}
.cc-title-mark {
    display: block;
    width: 2.25rem;
    height: .3125rem;
    margin-top: .4375rem;
    background: var(--cc-red);
}
.cc-count { margin: .5rem 0 0; font-size: .875rem; color: var(--cc-mudo); }
.cc-count .cc-mono { color: var(--cc-ink); font-weight: 500; }

/* Titulo de secao dentro da pagina, um degrau abaixo do cc-title. */
.cc-subtitle {
    font-family: var(--cc-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--cc-ink);
    margin: 0 0 .75rem;
}

/* ================================= Botoes =============================== */

.cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid transparent;
    border-radius: var(--cc-raio);
    padding: .5625rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.cc-btn i { font-size: .75em; }
.cc-btn:disabled, .cc-btn.is-ocupado { opacity: .6; cursor: not-allowed; }

.cc-btn-primary  { background: var(--cc-red); color: #fff; }
.cc-btn-primary:hover, .cc-btn-primary:focus-visible { background: var(--cc-red-escuro); color: #fff; }

.cc-btn-ink      { background: var(--cc-ink); color: #fff; }
.cc-btn-ink:hover, .cc-btn-ink:focus-visible { background: #000; color: #fff; }

.cc-btn-quieto   { background: transparent; border-color: var(--cc-fio); color: var(--cc-texto); }
.cc-btn-quieto:hover, .cc-btn-quieto:focus-visible { background: var(--cc-fundo); color: var(--cc-ink); }

.cc-btn-perigo   { background: var(--cc-red); color: #fff; }
.cc-btn-perigo:hover, .cc-btn-perigo:focus-visible { background: var(--cc-red-escuro); color: #fff; }

.cc-btn-perigo-quieto { background: transparent; border-color: var(--cc-red); color: var(--cc-red); }
.cc-btn-perigo-quieto:hover, .cc-btn-perigo-quieto:focus-visible { background: var(--cc-red); color: #fff; }

/* Contornadas: acao secundaria que ainda precisa dizer de que tipo e.
   Correspondem as antigas btn-outline-* do Bootstrap. */
.cc-btn-primary-quieto { background: transparent; border-color: var(--cc-red); color: var(--cc-red); }
.cc-btn-primary-quieto:hover, .cc-btn-primary-quieto:focus-visible { background: var(--cc-red); color: #fff; }
.cc-btn-ok-quieto { background: transparent; border-color: var(--cc-ok); color: var(--cc-ok); }
.cc-btn-ok-quieto:hover, .cc-btn-ok-quieto:focus-visible { background: var(--cc-ok); color: #fff; }
.cc-btn-atencao-quieto { background: transparent; border-color: var(--cc-atencao); color: var(--cc-atencao); }
.cc-btn-atencao-quieto:hover, .cc-btn-atencao-quieto:focus-visible { background: var(--cc-atencao); color: #fff; }
.cc-btn-info-quieto { background: transparent; border-color: var(--cc-info); color: var(--cc-info); }
.cc-btn-info-quieto:hover, .cc-btn-info-quieto:focus-visible { background: var(--cc-info); color: #fff; }
.cc-btn-ink-quieto { background: transparent; border-color: var(--cc-ink); color: var(--cc-ink); }
.cc-btn-ink-quieto:hover, .cc-btn-ink-quieto:focus-visible { background: var(--cc-ink); color: #fff; }

.cc-btn-ok       { background: var(--cc-ok); color: #fff; }
.cc-btn-ok:hover, .cc-btn-ok:focus-visible { background: var(--cc-ok-escuro); color: #fff; }

.cc-btn-atencao  { background: var(--cc-atencao); color: #fff; }
.cc-btn-atencao:hover, .cc-btn-atencao:focus-visible { background: var(--cc-atencao-escuro); color: #fff; }

.cc-btn-info     { background: var(--cc-info); color: #fff; }
.cc-btn-info:hover, .cc-btn-info:focus-visible { background: var(--cc-info-escuro); color: #fff; }

.cc-btn-link     { background: transparent; border-color: transparent; color: var(--cc-red); padding-left: .25rem; padding-right: .25rem; }
.cc-btn-link:hover, .cc-btn-link:focus-visible { text-decoration: underline; color: var(--cc-red-escuro); }

.cc-btn-sm  { padding: .375rem .6875rem; font-size: .8125rem; }
.cc-btn-lg  { padding: .75rem 1.375rem; font-size: 1rem; }
.cc-btn-bloco { display: flex; width: 100%; }

.cc-link-limpar { font-size: .8125rem; color: var(--cc-mudo); text-decoration: underline; }
.cc-link-limpar:hover { color: var(--cc-red); }

/* Foco visivel em toda a interface, nao so nas telas convertidas primeiro. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--cc-red);
    outline-offset: 2px;
}

/* ================================ Campos ================================ */

.cc-toolbar {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.cc-field { position: relative; }
.cc-field-busca { flex: 2 1 300px; }
.cc-field-icon {
    position: absolute;
    left: .875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cc-mudo);
    font-size: .8125rem;
    pointer-events: none;
}

.cc-input, .cc-select, .cc-textarea {
    width: 100%;
    border: 1px solid var(--cc-fio);
    border-radius: var(--cc-raio);
    background: var(--cc-papel);
    padding: .5625rem .875rem;
    font-size: .875rem;
    color: var(--cc-ink);
    line-height: 1.4;
}
.cc-field-busca .cc-input { padding-left: 2.375rem; }
.cc-input::placeholder, .cc-textarea::placeholder { color: var(--cc-mudo); }
.cc-input:focus, .cc-select:focus, .cc-textarea:focus {
    border-color: var(--cc-red);
    outline: none;
    box-shadow: 0 0 0 3px var(--cc-red-tinta);
}
.cc-input:disabled, .cc-select:disabled, .cc-textarea:disabled,
.cc-input[readonly], .cc-textarea[readonly] {
    background: var(--cc-fundo);
    color: var(--cc-mudo);
}
.cc-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b8184' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: .75rem;
    padding-right: 2.25rem;
}
.cc-input-sm, .cc-select-sm { padding: .375rem .625rem; font-size: .8125rem; }
.cc-select-sm { padding-right: 2rem; }

.cc-rotulo {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cc-mudo);
    margin-bottom: .3125rem;
}
.cc-ajuda { font-size: .75rem; color: var(--cc-mudo); margin-top: .25rem; }
.cc-erro-campo { font-size: .75rem; color: var(--cc-red); margin-top: .25rem; }
.cc-input.is-invalido, .cc-select.is-invalido { border-color: var(--cc-red); }

/* Grupo de campo com adorno (o antigo input-group). */
.cc-grupo-campo { display: flex; }
.cc-grupo-campo > .cc-input:not(:first-child),
.cc-grupo-campo > .cc-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cc-grupo-campo > .cc-input:not(:last-child),
.cc-grupo-campo > .cc-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cc-adorno {
    display: inline-flex;
    align-items: center;
    padding: 0 .75rem;
    background: var(--cc-fundo);
    border: 1px solid var(--cc-fio);
    color: var(--cc-mudo);
    font-size: .8125rem;
    white-space: nowrap;
}
.cc-grupo-campo > .cc-adorno:first-child { border-radius: var(--cc-raio) 0 0 var(--cc-raio); border-right: none; }
.cc-grupo-campo > .cc-adorno:last-child  { border-radius: 0 var(--cc-raio) var(--cc-raio) 0; border-left: none; }

/* Select2 no mesmo tom dos campos. Vale em toda a aplicacao, nao so na
   toolbar — o Select2 e usado em formularios espalhados pelo ERP. */
.select2-container--bootstrap-5 .select2-selection {
    border-color: var(--cc-fio);
    border-radius: var(--cc-raio);
    min-height: 40px;
    font-size: .875rem;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--cc-red);
    box-shadow: 0 0 0 3px var(--cc-red-tinta);
}

/* ============================== Folha e tabela ========================== */

.cc-sheet {
    background: var(--cc-papel);
    border: 1px solid var(--cc-fio);
    border-radius: var(--cc-raio-lg);
    overflow: hidden;
}
.cc-sheet + .cc-sheet { margin-top: 1rem; }
.cc-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--cc-fio);
}
.cc-sheet-head .cc-subtitle { margin: 0; }
.cc-sheet-corpo { padding: 1rem; }

.cc-table { width: 100%; border-collapse: collapse; margin: 0; }
.cc-table thead th {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cc-mudo);
    background: var(--cc-fundo);
    border-bottom: 1px solid var(--cc-fio);
    padding: .625rem 1rem;
    text-align: left;
    white-space: nowrap;
}
.cc-table tbody td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--cc-fio);
    vertical-align: middle;
    font-size: .875rem;
}
.cc-table tbody tr:last-child td { border-bottom: none; }
.cc-table tbody tr { transition: background-color .12s ease, box-shadow .12s ease; }
.cc-table tbody tr:hover { background: #fbf8f7; box-shadow: inset 3px 0 0 var(--cc-red); }
.cc-table tfoot td {
    padding: .75rem 1rem;
    background: var(--cc-fundo);
    border-top: 1px solid var(--cc-fio);
    font-weight: 600;
    color: var(--cc-ink);
    font-size: .875rem;
}
/* Cabecalho ordenavel: o th inteiro e area de clique, a seta diz o estado.
   A seta neutra fica visivel de proposito -- sem ela ninguem descobre que da
   para clicar no cabecalho. */
.cc-table thead th.cc-th-ord { padding: 0; }
.cc-table thead th.cc-th-ord > a.cc-ord {
    display: flex;
    align-items: center;
    gap: .4em;
    padding: .625rem 1rem;
    color: inherit;
    text-decoration: none;
}
.cc-table thead th.cc-th-ord.text-end > a.cc-ord { justify-content: flex-end; }
.cc-table thead th.cc-th-ord.text-center > a.cc-ord { justify-content: center; }
.cc-table thead th.cc-th-ord > a.cc-ord:hover { color: var(--cc-ink); background: var(--cc-fio); }
.cc-table thead th.cc-th-ord > a.cc-ord:focus-visible { outline: 2px solid var(--cc-red); outline-offset: -2px; }
.cc-ord-seta { font-size: .85em; line-height: 1; opacity: .3; }
.cc-th-ord-ativa .cc-ord-seta { opacity: 1; color: var(--cc-red); }
.cc-th-ord-ativa > a.cc-ord { color: var(--cc-ink); }
.cc-table-compacta thead th.cc-th-ord > a.cc-ord { padding: .5rem .75rem; }

/* Texto de celula que pode vir longo demais (descricao de titulo, observacao).
   Sem limite, uma unica linha com a lista de itens de uma venda ocupa doze
   linhas e desmancha o ritmo da tabela inteira. O texto completo continua
   acessivel no title. */
.cc-trunc-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* dois nomes de propriedade: o padronizado ainda nao e universal. */
    line-clamp: 2;
}

.cc-table .cc-num { text-align: right; font-family: var(--cc-mono-fam); font-size: .8125rem; white-space: nowrap; }
.cc-table-compacta tbody td { padding: .5rem .75rem; }
.cc-table-compacta thead th { padding: .5rem .75rem; }
.cc-table-bordas, .cc-table-bordas th, .cc-table-bordas td { border: 1px solid var(--cc-fio); }
/* Tabela solta, fora de uma .cc-sheet: precisa da propria moldura. */
.cc-table-solta { border: 1px solid var(--cc-fio); border-radius: var(--cc-raio-lg); overflow: hidden; }
/* Tabela ocupa a folha inteira.

   A maioria das listagens do ERP tem a tabela dentro do corpo de um cartao, e o
   padding desse corpo desenha uma moldura branca em volta da tabela — e' o que
   distingue, de relance, uma listagem antiga de uma no padrao do /clients, onde
   a tabela encosta na borda da folha.

   Resolvido aqui, e nao no markup de 71 telas: o :has() zera o padding so
   quando o corpo existe para segurar a tabela. Onde o :has() nao for suportado
   o resultado e' apenas a moldura de antes — nada quebra. */
.cc-card-corpo:has(> .cc-table),
.cc-card-corpo:has(> .table-responsive > .cc-table),
.cc-sheet-corpo:has(> .cc-table),
.cc-sheet-corpo:has(> .table-responsive > .cc-table) {
    padding: 0;
}
/* Rodape e cabecalho da propria folha continuam recuados. */
.cc-card-corpo:has(> .cc-table) > .cc-sheet-foot,
.cc-card-corpo:has(> .table-responsive) > .cc-sheet-foot { padding: .75rem 1rem; }

/* Linha inteira clicavel, como a listagem de O.S. ja fazia. */
.cc-linha-clicavel { cursor: pointer; }

/* Linha tingida por significado (as antigas table-success, table-info...).
   O !important existe porque a cc-table pinta o hover da linha inteira e ele
   venceria a tinta, escondendo justamente o que a cor queria destacar. */
.cc-table tbody tr.cc-linha-ok,      .cc-table tbody tr.cc-linha-ok > td      { background: var(--cc-ok-tinta) !important; }
.cc-table tbody tr.cc-linha-perigo,  .cc-table tbody tr.cc-linha-perigo > td  { background: var(--cc-red-tinta) !important; }
.cc-table tbody tr.cc-linha-atencao, .cc-table tbody tr.cc-linha-atencao > td { background: var(--cc-atencao-tinta) !important; }
.cc-table tbody tr.cc-linha-info,    .cc-table tbody tr.cc-linha-info > td    { background: var(--cc-info-tinta) !important; }
.cc-table tbody tr.cc-linha-mudo,    .cc-table tbody tr.cc-linha-mudo > td    { background: var(--cc-fundo) !important; }
.cc-table td.cc-linha-ok      { background: var(--cc-ok-tinta) !important; }
.cc-table td.cc-linha-perigo  { background: var(--cc-red-tinta) !important; }
.cc-table td.cc-linha-atencao { background: var(--cc-atencao-tinta) !important; }
.cc-table td.cc-linha-info    { background: var(--cc-info-tinta) !important; }
.cc-table td.cc-linha-mudo    { background: var(--cc-fundo) !important; }

.cc-doc   { color: var(--cc-texto); white-space: nowrap; }
.cc-vazio { color: var(--cc-fio); }

.cc-sheet-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    border-top: 1px solid var(--cc-fio);
    background: var(--cc-fundo);
}
.cc-intervalo { color: var(--cc-mudo); font-size: .75rem; }

/* ============================== Paginacao =============================== */

.cc-paginacao { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.cc-pag {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px;
    padding: 0 .5rem;
    border-radius: var(--cc-raio);
    font-size: .8125rem;
    color: var(--cc-texto);
    text-decoration: none;
}
.cc-pag:hover { background: #fff; color: var(--cc-ink); }
.cc-pag-ativa, .cc-pag-ativa:hover { background: var(--cc-ink); color: #fff; }
.cc-pag-off, .cc-pag-off:hover { color: var(--cc-fio); pointer-events: none; background: transparent; }

/* ================================ Acoes ================================= */
/* Cada verbo tem a propria cor: azul consulta, ambar edita, vermelho remove. */

.cc-th-acoes, .cc-td-acoes { width: 140px; text-align: right; }
/* flex-wrap: no cabecalho de pagina, .cc-acoes agrupa os botoes de acao e sem a
   quebra o ultimo sai da tela em 390px -- em /products era justamente o
   "Novo Produto". Nas celulas da tabela, onde cabem dois ou tres .cc-acao de
   34px, a quebra nunca chega a acontecer. */
.cc-acoes { display: inline-flex; flex-wrap: wrap; gap: .375rem; }
.cc-acao {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: none; border-radius: var(--cc-raio-lg);
    font-size: .875rem;
    text-decoration: none;
    cursor: pointer;
    background: var(--cc-fundo);
    color: var(--cc-texto);
    transition: background-color .12s ease, color .12s ease, transform .12s ease;
}
.cc-acao:hover, .cc-acao:focus-visible { transform: translateY(-1px); }
.cc-acao-ver, .cc-acao-inventario { background: var(--cc-info-tinta); color: var(--cc-info); }
.cc-acao-ver:hover, .cc-acao-ver:focus-visible,
.cc-acao-inventario:hover, .cc-acao-inventario:focus-visible { background: var(--cc-info); color: #fff; }
.cc-acao-editar { background: var(--cc-atencao-tinta); color: var(--cc-atencao); }
.cc-acao-editar:hover, .cc-acao-editar:focus-visible { background: var(--cc-atencao-escuro); color: #fff; }
.cc-acao-ok { background: var(--cc-ok-tinta); color: var(--cc-ok); }
.cc-acao-ok:hover, .cc-acao-ok:focus-visible { background: var(--cc-ok); color: #fff; }
.cc-acao-perigo { background: var(--cc-red-tinta); color: var(--cc-red); }
.cc-acao-perigo:hover, .cc-acao-perigo:focus-visible { background: var(--cc-red); color: #fff; }

/* ============================= Chips e status =========================== */

.cc-chip {
    display: inline-block;
    border: 1px solid var(--cc-fio);
    border-radius: 999px;
    padding: .125rem .625rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--cc-texto);
    background: var(--cc-papel);
    text-decoration: none;
    white-space: nowrap;
}
a.cc-chip:hover { border-color: var(--cc-red); color: var(--cc-red); }
.cc-chip-ok      { background: var(--cc-ok-tinta);      color: var(--cc-ok-escuro);      border-color: transparent; }
.cc-chip-perigo  { background: var(--cc-red-tinta);     color: var(--cc-red-escuro);     border-color: transparent; }
.cc-chip-atencao { background: var(--cc-atencao-tinta); color: var(--cc-atencao-escuro); border-color: transparent; }
.cc-chip-info    { background: var(--cc-info-tinta);    color: var(--cc-info-escuro);    border-color: transparent; }
.cc-chip-mudo    { background: var(--cc-fundo);         color: var(--cc-mudo);           border-color: transparent; }
.cc-chip-ink     { background: var(--cc-ink);           color: #fff;                     border-color: transparent; }
.cc-chip-marca   { background: var(--cc-red-tinta);     color: var(--cc-red-escuro);     border-color: transparent; }

/* Compatibilidade para o selo cuja cor e decidida em PHP.
   Uns 27 lugares montam a classe em tempo de execucao —
       <span class="cc-chip bg-<?= $ok ? 'success' : 'secondary' ?>">
   — e nao ha como reescrever estaticamente o que so existe quando a pagina
   roda. Sem isto o selo ficava com a base nossa e o fundo forte do Bootstrap,
   frequentemente com texto ilegivel por cima. Vale so dentro de .cc-chip: nao
   e um atalho para usar bg-* como cor no resto da interface. */
.cc-chip.bg-success,  .cc-chip.text-bg-success  { background: var(--cc-ok-tinta)      !important; color: var(--cc-ok-escuro)      !important; border-color: transparent; }
.cc-chip.bg-danger,   .cc-chip.text-bg-danger   { background: var(--cc-red-tinta)     !important; color: var(--cc-red-escuro)     !important; border-color: transparent; }
.cc-chip.bg-warning,  .cc-chip.text-bg-warning  { background: var(--cc-atencao-tinta) !important; color: var(--cc-atencao-escuro) !important; border-color: transparent; }
.cc-chip.bg-info,     .cc-chip.text-bg-info     { background: var(--cc-info-tinta)    !important; color: var(--cc-info-escuro)    !important; border-color: transparent; }
.cc-chip.bg-primary,  .cc-chip.text-bg-primary  { background: var(--cc-red-tinta)     !important; color: var(--cc-red-escuro)     !important; border-color: transparent; }
.cc-chip.bg-secondary,.cc-chip.text-bg-secondary{ background: var(--cc-fundo)         !important; color: var(--cc-mudo)           !important; border-color: transparent; }
.cc-chip.bg-light,    .cc-chip.text-bg-light    { background: var(--cc-fundo)         !important; color: var(--cc-texto)          !important; border-color: var(--cc-fio); }
.cc-chip.bg-dark,     .cc-chip.text-bg-dark     { background: var(--cc-ink)           !important; color: #fff                     !important; border-color: transparent; }
/* O text-dark/text-white que acompanhava o fundo forte perde a razao de ser. */
.cc-chip.text-dark, .cc-chip.text-white { color: inherit !important; }

/* Mesma situacao nos cartoes do painel, onde a cor do botao vem do banco:
       <a class="cc-btn btn-<?= $card['color'] ?>"> */
.cc-btn.btn-primary   { background: var(--cc-red);     border-color: transparent; color: #fff; }
.cc-btn.btn-success   { background: var(--cc-ok);      border-color: transparent; color: #fff; }
.cc-btn.btn-danger    { background: var(--cc-red);     border-color: transparent; color: #fff; }
.cc-btn.btn-warning   { background: var(--cc-atencao); border-color: transparent; color: #fff; }
.cc-btn.btn-info      { background: var(--cc-info);    border-color: transparent; color: #fff; }
.cc-btn.btn-secondary { background: transparent;       border-color: var(--cc-fio); color: var(--cc-texto); }
.cc-btn.btn-dark      { background: var(--cc-ink);     border-color: transparent; color: #fff; }
.cc-btn.btn-light     { background: transparent;       border-color: var(--cc-fio); color: var(--cc-texto); }

/* Filtro em forma de pilula, como a listagem de O.S. ja usava. */
.cc-pilulas { display: flex; flex-wrap: wrap; gap: .4rem; }
.cc-pilula {
    padding: .25rem .75rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--cc-mudo);
    background: var(--cc-papel);
    border: 1px solid var(--cc-fio);
    text-decoration: none;
}
.cc-pilula:hover { background: var(--cc-fundo); color: var(--cc-texto); }
.cc-pilula.is-ativa { background: var(--cc-red); color: #fff; border-color: var(--cc-red); }

/* =============================== Alertas ================================ */

.cc-alerta {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: var(--cc-raio);
    padding: .75rem 1rem;
    font-size: .875rem;
    margin-bottom: 1rem;
}
.cc-alerta i { margin-top: .15rem; }
.cc-alerta-ok      { background: var(--cc-ok-tinta);      border-left-color: var(--cc-ok);      color: var(--cc-ok-escuro); }
.cc-alerta-perigo  { background: var(--cc-red-tinta);     border-left-color: var(--cc-red);     color: var(--cc-red-escuro); }
.cc-alerta-atencao { background: var(--cc-atencao-tinta); border-left-color: var(--cc-atencao); color: var(--cc-atencao-escuro); }
.cc-alerta-info    { background: var(--cc-info-tinta);    border-left-color: var(--cc-info);    color: var(--cc-info-escuro); }
.cc-alerta-corpo { flex: 1 1 auto; }

/* =============================== Vazio ================================== */

.cc-empty { text-align: center; padding: 4rem 1.5rem; }
.cc-empty i { font-size: 2rem; color: var(--cc-fio); margin-bottom: 1rem; display: block; }
.cc-empty-title {
    font-family: var(--cc-display);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--cc-ink);
    margin: 0 0 .25rem;
}
.cc-empty-hint { font-size: .875rem; color: var(--cc-mudo); margin: 0; }
.cc-empty-hint a { color: var(--cc-red); }

/* =========================== Cartoes e numeros ========================== */

/* Espelha as pecas do .card do Bootstrap (cabecalho / corpo / rodape) para a
   conversao do markup existente ser uma troca de nome, e nao uma remontagem.
   Como la, .cc-card nao tem padding proprio: quem paga e o corpo. */
.cc-card {
    /* O flex-column espelha o .card do Bootstrap de proposito: telas com
       "card h-100" dependiam dele para o corpo esticar ate o rodape. Sem isso
       a conversao do markup mexeria no layout, e nao so na aparencia. */
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cc-papel);
    border: 1px solid var(--cc-fio);
    border-radius: var(--cc-raio-lg);
}
.cc-card-corpo { flex: 1 1 auto; padding: 1rem; }
.cc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--cc-fio);
    background: var(--cc-fundo);
    border-radius: var(--cc-raio-lg) var(--cc-raio-lg) 0 0;
}
/* Faixa de cabecalho com significado.

   As telas antigas usavam bg-danger/bg-success/bg-warning com texto branco --
   uma barra de cor forte atravessando o cartao, que e o que denuncia de longe
   uma tela fora do padrao (nem /clients nem /products tem isso). Tirar a cor
   por completo custaria o aviso onde ele existe de verdade, entao aqui ela fica
   como tinta suave, no mesmo tom dos chips e dos alertas. */
.cc-card-head--perigo  { background: var(--cc-red-tinta);     color: var(--cc-red-escuro); }
.cc-card-head--atencao { background: var(--cc-atencao-tinta); color: var(--cc-atencao-escuro); }
.cc-card-head--ok      { background: var(--cc-ok-tinta);      color: var(--cc-ok-escuro); }
.cc-card-head--info    { background: var(--cc-info-tinta);    color: var(--cc-info-escuro); }
.cc-card-head--perigo .cc-card-titulo,
.cc-card-head--atencao .cc-card-titulo,
.cc-card-head--ok .cc-card-titulo,
.cc-card-head--info .cc-card-titulo { color: inherit; }

.cc-card-foot {
    padding: .75rem 1rem;
    border-top: 1px solid var(--cc-fio);
    background: var(--cc-fundo);
    border-radius: 0 0 var(--cc-raio-lg) var(--cc-raio-lg);
}
.cc-card-titulo {
    font-family: var(--cc-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--cc-ink);
    margin: 0;
}
.cc-card-sub { font-size: .8125rem; color: var(--cc-mudo); margin: .125rem 0 0; }
.cc-card-texto { font-size: .875rem; color: var(--cc-texto); margin: 0; }

.cc-stat { display: flex; flex-direction: column; gap: .125rem; }
.cc-stat-valor {
    font-family: var(--cc-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cc-ink);
}
.cc-stat-rotulo { font-size: .8125rem; color: var(--cc-mudo); }
.cc-stat-ok     .cc-stat-valor { color: var(--cc-ok); }
.cc-stat-perigo .cc-stat-valor { color: var(--cc-red); }
.cc-stat-atencao .cc-stat-valor { color: var(--cc-atencao); }

/* =============================== Listas ================================= */

.cc-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cc-fio); border-radius: var(--cc-raio-lg); overflow: hidden; background: var(--cc-papel); }
.cc-lista-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6875rem 1rem;
    border-bottom: 1px solid var(--cc-fio);
    font-size: .875rem;
    color: var(--cc-texto);
    text-decoration: none;
}
.cc-lista-item:last-child { border-bottom: none; }
a.cc-lista-item:hover { background: var(--cc-fundo); color: var(--cc-ink); }

/* ================================ Abas ================================== */

.cc-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--cc-fio);
    margin-bottom: 1rem;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
}
.cc-tab {
    display: inline-block;
    padding: .5625rem .875rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--cc-mudo);
    text-decoration: none;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}
.cc-tab:hover { color: var(--cc-texto); }
.cc-tab.is-ativa, .cc-tab.active { color: var(--cc-ink); border-bottom-color: var(--cc-red); }

/* ================================ Modal ================================= */
/* O involucro (.modal, .modal-dialog, data-bs-dismiss) continua sendo do
   Bootstrap: a classe e contrato com o JS dele. So a aparencia e nossa. */

.cc-modal, .modal-content {
    border: none;
    border-radius: var(--cc-raio-lg);
    background: var(--cc-papel);
}
.modal-header {
    border-bottom: 1px solid var(--cc-fio);
    padding: .875rem 1.125rem;
}
.modal-title {
    font-family: var(--cc-display);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--cc-ink);
}
.modal-body { padding: 1.125rem; font-size: .875rem; }
.modal-footer {
    border-top: 1px solid var(--cc-fio);
    background: var(--cc-fundo);
    padding: .75rem 1.125rem;
    gap: .5rem;
}
.cc-modal-nome {
    font-weight: 600;
    color: var(--cc-ink);
    background: var(--cc-red-tinta);
    border-left: 3px solid var(--cc-red);
    border-radius: .25rem;
    padding: .625rem .875rem;
    margin: .75rem 0;
}
.cc-modal-aviso { font-size: .8125rem; color: var(--cc-mudo); }

/* ===================== Widgets do Bootstrap, restilizados ================ */
/* Estes nao sao renomeados: a classe e contrato com o JS da biblioteca.
   Sao restilizados para nao destoarem do resto. */

.btn-close:focus-visible { outline: 2px solid var(--cc-red); outline-offset: 2px; box-shadow: none; }

/* Caixas de marcacao: replicar o desenho do Bootstrap do zero seria trabalho
   sem retorno, entao a classe fica e so a cor de marcado passa a ser a nossa. */
.form-check-input:checked { background-color: var(--cc-red); border-color: var(--cc-red); }
.form-check-input:focus { border-color: var(--cc-red); box-shadow: 0 0 0 3px var(--cc-red-tinta); }
.form-check-label { font-size: .875rem; color: var(--cc-texto); }

.dropdown-menu {
    border: 1px solid var(--cc-fio);
    border-radius: var(--cc-raio-lg);
    box-shadow: 0 8px 24px rgba(34, 27, 28, .10);
    font-size: .875rem;
    padding: .3125rem;
}
.dropdown-item { border-radius: var(--cc-raio); padding: .4375rem .625rem; color: var(--cc-texto); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--cc-fundo); color: var(--cc-ink); }
.dropdown-item.active, .dropdown-item:active { background: var(--cc-red); color: #fff; }
.dropdown-divider { border-top-color: var(--cc-fio); }

.accordion-item { border-color: var(--cc-fio); background: var(--cc-papel); }
.accordion-button { font-size: .9375rem; color: var(--cc-texto); background: var(--cc-papel); }
.accordion-button:not(.collapsed) { background: var(--cc-red-tinta); color: var(--cc-red-escuro); box-shadow: none; }
.accordion-button:focus { border-color: var(--cc-fio); box-shadow: 0 0 0 3px var(--cc-red-tinta); }

.progress { background: var(--cc-fundo); border-radius: 999px; height: .5rem; }
.progress-bar { background: var(--cc-red); }

.tooltip-inner { background: var(--cc-ink); font-size: .75rem; border-radius: var(--cc-raio); }
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--cc-ink); }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--cc-ink); }

/* ============================== Utilitarios ============================= */

.cc-pagina { max-width: 1200px; margin: 0 auto; padding-bottom: 3rem; }
.cc-pagina-larga { max-width: none; }

@media (max-width: 575.98px) {
    .cc-head { align-items: flex-start; flex-direction: column; }
    /* O .btn-group do Bootstrap e uma peca unida e nao quebra linha: em 390px o
       ultimo botao ficava fora da tela (o "Proximo Mes" do periodo rapido, em
       contas a receber). Rolar preserva o desenho do grupo e devolve o acesso. */
    .btn-group { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .btn-group::-webkit-scrollbar { display: none; }
    .cc-toolbar .cc-btn { flex: 1 1 auto; justify-content: center; }
    .cc-th-acoes, .cc-td-acoes { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
    .cc-sheet, .cc-card { border: none; }
    .cc-acoes, .cc-toolbar, .cc-paginacao, .cc-sheet-foot { display: none !important; }
}

/* ===================== Modos de exibicao sem o shell ===================== */
/* Vinham de tres blocos de CSS inline no layout.php. */

/* ?modal=1 — a pagina e aberta dentro de um modal de outra tela. */
.cc-modo-modal { background: var(--cc-papel) !important; padding-top: 0 !important; }
.cc-modo-modal .container-fluid { padding: 15px !important; }
.cc-modo-modal .cc-sheet,
.cc-modo-modal .cc-card { border: none !important; box-shadow: none !important; }
.cc-modo-modal nav,
.cc-modo-modal .navbar,
.cc-modo-modal .topbar-erp { display: none !important; }

/* A pagina esta dentro de um <iframe>: fora o shell. */
.is-iframe-mode nav,
.is-iframe-mode .topbar-erp,
.is-iframe-mode .sidebar-erp,
.is-iframe-mode .navbar,
.is-iframe-mode footer {
    display: none !important;
    height: 0 !important;
}
.is-iframe-mode main,
.is-iframe-mode .container-fluid {
    margin-top: 0 !important;
    padding-top: 10px !important;
}
.is-iframe-mode body { padding-top: 0 !important; background: var(--cc-papel) !important; }

/* O menu do topo alinha os ultimos dropdowns pela direita para nao vazarem. */
@media (min-width: 992px) {
    .navbar-nav .nav-item:nth-last-child(-n+3) .dropdown-menu { right: 0; left: auto; }
}