/* ---------------------------------------------------------------------------
   Etiquetas de situacao do painel
   ---------------------------------------------------------------------------

   Arquivo proprio, e nao mais uma secao de `surfapp-admin.css`, porque aqui
   mora UMA responsabilidade: como o painel desenha estado. Badge aparece em
   listagem de CRUD, em painel e em tela customizada, e ate agora cada lugar
   herdava o resultado do Tabler sem ninguem decidir nada.

   CAUSA RAIZ (medida no navegador, e nao deduzida)
   ---------------------------------------------------------------------------
   O Tabler 1.4 desenha a etiqueta assim:

       .badge { --tblr-badge-color: var(--tblr-secondary); color: var(--tblr-badge-color) }

   Ou seja: TODA etiqueta recebe o texto na cor `--tblr-secondary`, e a classe
   utilitaria `.bg-*` so troca o fundo — nunca o texto. Com a paleta do SurfApp
   `--tblr-secondary` e o cinza quente `#6e6a65`, e o resultado medido era:

       .badge.bg-secondary   #6e6a65 sobre #6e6a65   1,00:1   (invisivel)
       .badge.bg-success     #6e6a65 sobre #1f7a5c   1,02:1
       .badge.bg-danger      #6e6a65 sobre #c0503f   1,14:1
       .badge.bg-primary     #6e6a65 sobre #1a828e   1,18:1
       .badge.bg-info        #6e6a65 sobre #4aa5a6   1,85:1
       .badge.bg-dark        #6e6a65 sobre #0a2638   2,90:1
       .badge.bg-warning     #0a2638 sobre #c08a3e   5,16:1   (unico que passava)

   O minimo WCAG AA para texto pequeno e 4,5:1. O `bg-secondary` a 1,00:1 e
   literalmente o texto pintado com a cor do proprio fundo: e por isso que a
   coluna "Padrao" mostrava um bloco cinza aparentemente vazio — o "Nao" estava
   la o tempo todo.

   POR QUE FUNDO SUAVE E NAO FUNDO CHEIO COM TEXTO BRANCO
   ---------------------------------------------------------------------------
   Branco sobre o tom cheio resolveria `success` (5,25:1) e `danger` (4,71:1),
   mas reprovaria justamente os tons claros da marca: `info` #4aa5a6 da 2,91:1 e
   `warning` #c08a3e da 3,02:1. Nao existe uma regra unica de texto branco que
   sirva para os sete estados sem mexer na paleta — e a paleta e do outro dev.

   O fundo suave da a mesma familia de tratamento para os sete, com folga:
   5,36 / 7,33 / 6,61 / 4,94 / 4,72 / 6,00 / 7,24. Para nao parecer componente
   desabilitado, a etiqueta ganha borda visivel no tom do estado e peso 600 —
   e nao depende so de cor: o rotulo do estado continua escrito por extenso.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. A familia `.surf-status`
   ---------------------------------------------------------------------------

   Segue a nomenclatura que o painel ja usa (`surf-brand-logo--dark`,
   `surf-topbar-tenant__nome`): bloco `surf-status`, modificador `--tom`.

   O seletor duplo `.badge.bg-*` e a camada de compatibilidade: enquanto houver
   tela montando etiqueta na mao, ela recebe o mesmo desenho em vez de ficar
   ilegivel. E composto de proposito (`.badge` + `.bg-*`, especificidade 0,2,0),
   entao vence o `.badge` do Tabler e nao afeta quem usa `.bg-success` fora de
   etiqueta (barra de progresso, cartao, alerta).
   --------------------------------------------------------------------------- */

.surf-status,
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-success,
.badge.bg-info,
.badge.bg-warning,
.badge.bg-danger,
.badge.bg-dark {
    /* Tom do estado. Cada modificador troca so estas quatro variaveis; o
       desenho (tamanho, forma, tipografia) e o mesmo para todos. */
    --surf-status-tone: var(--tblr-secondary, #6e6a65);
    --surf-status-bg: var(--tblr-secondary-bg-subtle, #eeece8);
    --surf-status-fg: var(--tblr-secondary-text-emphasis, #4f4b47);
    --surf-status-edge: var(--tblr-secondary-border-subtle, #d0c9bb);

    /* `inline-flex` + `min-height` + `min-width` para que "Sim" e "Nao" (ou
       qualquer par de estados de uma mesma coluna) tenham a mesma caixa. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
    min-width: 2.75rem;
    padding: 0.125rem 0.5rem;

    border: 1px solid var(--surf-status-edge);
    border-radius: 1rem;
    background-color: var(--surf-status-bg);
    color: var(--surf-status-fg);

    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   2. Os sete tons em uso
   ---------------------------------------------------------------------------

   Sao exatamente os sete que os enums devolvem em `color()`. Os valores vem dos
   tokens da paleta: uma fonte de verdade so, em `surfapp-palette.css`.
   --------------------------------------------------------------------------- */

.surf-status--primary,
.badge.bg-primary {
    --surf-status-tone: var(--tblr-primary, #1a828e);
    --surf-status-bg: var(--tblr-primary-bg-subtle, #ddeff1);
    --surf-status-fg: var(--tblr-primary-text-emphasis, #146973);
    --surf-status-edge: var(--tblr-primary-border-subtle, #b3dade);
}

.surf-status--secondary,
.badge.bg-secondary {
    --surf-status-tone: var(--tblr-secondary, #6e6a65);
    --surf-status-bg: var(--tblr-secondary-bg-subtle, #eeece8);
    --surf-status-fg: var(--tblr-secondary-text-emphasis, #4f4b47);
    --surf-status-edge: var(--tblr-secondary-border-subtle, #d0c9bb);
}

.surf-status--success,
.badge.bg-success {
    --surf-status-tone: var(--tblr-success, #1f7a5c);
    --surf-status-bg: var(--tblr-success-bg-subtle, #dcefe7);
    --surf-status-fg: var(--tblr-success-text-emphasis, #175c46);
    --surf-status-edge: var(--tblr-success-border-subtle, #b4dccd);
}

.surf-status--info,
.badge.bg-info {
    --surf-status-tone: var(--tblr-info, #4aa5a6);
    --surf-status-bg: var(--tblr-info-bg-subtle, #e4f1f0);
    --surf-status-fg: var(--tblr-info-text-emphasis, #23707a);
    --surf-status-edge: var(--tblr-info-border-subtle, #c2dfdb);
}

.surf-status--warning,
.badge.bg-warning {
    --surf-status-tone: var(--tblr-warning, #c08a3e);
    --surf-status-bg: var(--tblr-warning-bg-subtle, #f7eedf);
    --surf-status-fg: var(--tblr-warning-text-emphasis, #8a622b);
    --surf-status-edge: var(--tblr-warning-border-subtle, #e6d0ab);
}

.surf-status--danger,
.badge.bg-danger {
    --surf-status-tone: var(--tblr-danger, #c0503f);
    --surf-status-bg: var(--tblr-danger-bg-subtle, #f7e3df);
    --surf-status-fg: var(--tblr-danger-text-emphasis, #8f3b2f);
    --surf-status-edge: var(--tblr-danger-border-subtle, #e6bcb3);
}

.surf-status--dark,
.badge.bg-dark {
    --surf-status-tone: var(--tblr-dark, #0a2638);
    --surf-status-bg: var(--tblr-dark-bg-subtle, #d0c9bb);
    --surf-status-fg: var(--tblr-dark-text-emphasis, #1c3a4d);
    --surf-status-edge: var(--tblr-dark-border-subtle, #a5a4a4);
}

/* ---------------------------------------------------------------------------
   3. O unico `!important` do arquivo
   ---------------------------------------------------------------------------

   As utilitarias de fundo do Bootstrap sao geradas com `!important`:

       .bg-primary { background-color: color-mix(...) !important }

   Contra `!important` nao existe especificidade que resolva — verificado no
   navegador, lendo `getPropertyPriority('background-color')` da regra do
   `tabler.min.css`. Sem esta linha a etiqueta legada fica com o texto novo
   (#146973) sobre o fundo cheio antigo (#1a828e): 1,40:1.

   Vale so para `background-color`, so no par `.badge` + `.bg-*`, e so pela
   camada de compatibilidade. A familia `.surf-status` nao precisa disso.
   --------------------------------------------------------------------------- */

.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-success,
.badge.bg-info,
.badge.bg-warning,
.badge.bg-danger,
.badge.bg-dark {
    background-color: var(--surf-status-bg) !important;
}

/* ---------------------------------------------------------------------------
   4. Modo escuro: removido
   ---------------------------------------------------------------------------

   Havia aqui duas regras `[data-bs-theme='dark'] ...` que redesenhavam os sete
   tons com `color-mix` para funcionarem sobre superficie escura. Sairam junto
   com o modo escuro: nenhum elemento do painel carrega mais esse atributo com
   valor `dark`, entao as regras nunca casariam.

   O ponto que as tornou mortas fica em
   `resources/views/vendor/backpack/theme-tabler/inc/head.blade.php`, que limpa
   a preferencia salva antes de qualquer script do tema ler o localStorage.
   Se algum dia o tema escuro voltar, e de la que ele volta -- e ai estas
   regras precisam ser reescritas, nao ressuscitadas: os tons da paleta escura
   tambem foram removidos.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   5. Ajustes de contexto
   --------------------------------------------------------------------------- */

/* Numa celula de tabela a etiqueta e o unico conteudo: sem isso ela herda o
   `line-height` da linha e a caixa fica maior que a das vizinhas. */
.table td > .surf-status,
.table td > .badge {
    vertical-align: middle;
}

/* Etiquetas em sequencia (papeis do usuario, midia com varias marcacoes)
   precisam de respiro entre si sem depender de ` ` no HTML. */
.surf-status + .surf-status {
    margin-left: 0.25rem;
}

/* Dentro de titulo a etiqueta nao deve puxar o tamanho da fonte do heading. */
h1 > .surf-status,
h2 > .surf-status,
h3 > .surf-status,
.page-title > .surf-status {
    font-size: 0.75rem;
    font-weight: 600;
}