/* ---------------------------------------------------------------------------
   Caixas de aviso do painel
   ---------------------------------------------------------------------------

   UMA caixa por vez, e a cor diz o que ela e.

   Nasceu do retorno do cliente sobre o topo de `/admin/dashboard`: dois
   cartoes AZUIS identicos, empilhados, dizendo a mesma pendencia com palavras
   diferentes ("Configure como sua escola vai utilizar o SurfApp para liberar a
   operacao" e "Sua escola esta quase pronta para vender"). O pedido veio com a
   convencao junto -- amarelo para atencao, vermelho para algo impeditivo e
   azul para comunicacao -- e e ela que este arquivo desenha.

   POR QUE NAO O `.alert` DO TABLER
   ---------------------------------------------------------------------------
   Existe e seria menos codigo, mas ele pinta o TEXTO com o tom cheio sobre
   fundo quase branco, e o tom cheio da nossa paleta nao aguenta texto: #c08a3e
   sobre #fff da 3,07:1, abaixo do minimo de 4,5:1 da WCAG. E exatamente o
   defeito que `surfapp-badges.css` mediu nas etiquetas, entao a correcao e a
   mesma familia de tokens -- fundo suave, texto no tom de enfase, borda no tom
   sutil. Medido, e nao estimado:

       titulo e icone (-text-emphasis) sobre o fundo (-bg-subtle)
         atencao      #8a622b sobre #f7eedf   4,72:1
         impeditivo   #8f3b2f sobre #f7e3df   6,00:1
         comunicacao  #23707a sobre #e4f1f0   4,94:1

       corpo (--surf-navy #0a2638) sobre os mesmos fundos   12,6 a 13,6:1
       botao (branco sobre -text-emphasis)                  5,44 / 7,41 / 5,72:1

   A FAIXA LATERAL usa o tom CHEIO (#c08a3e, #c0503f, #4aa5a6), e nao o de
   enfase: e ela que faz a caixa ser reconhecida como "a amarela" ou "a
   vermelha" de relance, que e o que o cliente pediu. Ela e decoracao, e o que
   precisa contrastar e a pagina em volta -- 3,07:1 no pior caso, o amarelo
   sobre o branco. Nada depende so dela: a caixa ja se separa do fundo pela cor
   propria, pela borda e pelo icone, e o titulo diz o estado por escrito.

   NENHUMA COR DE MARCA AQUI. O painel e white label e `--tblr-primary` carrega
   a cor da ESCOLA, que muda a cada tenant e nao tem contraste garantido com
   texto claro (por isso o portal passa a cor pelo `App\Support\ReadableColor`
   antes de usa-la). Os tres tons deste arquivo sao semanticos e fixos de
   proposito: "impeditivo" nao pode sair verde porque a escola escolheu verde.
   --------------------------------------------------------------------------- */

.surf-aviso {
    /* Cada modificador troca so estas quatro variaveis; o desenho (caixa,
       espacamento, tipografia) e o mesmo para os tres. Mesma decisao, e mesma
       forma, de `.surf-status` em `surfapp-badges.css`. */
    --surf-aviso-tone: var(--tblr-secondary, #6e6a65);
    --surf-aviso-bg: var(--tblr-secondary-bg-subtle, #eeece8);
    --surf-aviso-fg: var(--tblr-secondary-text-emphasis, #4f4b47);
    --surf-aviso-edge: var(--tblr-secondary-border-subtle, #d0c9bb);

    display: flex;
    align-items: flex-start;
    gap: .65rem;

    padding: .9rem 1.1rem;
    border: 1px solid var(--surf-aviso-edge);
    border-left: .25rem solid var(--surf-aviso-tone);
    border-radius: .5rem;

    background-color: var(--surf-aviso-bg);
    color: var(--surf-navy, #0a2638);
}

/* Impeditivo: a escola nao opera. */
.surf-aviso--danger {
    --surf-aviso-tone: var(--tblr-danger, #c0503f);
    --surf-aviso-bg: var(--tblr-danger-bg-subtle, #f7e3df);
    --surf-aviso-fg: var(--tblr-danger-text-emphasis, #8f3b2f);
    --surf-aviso-edge: var(--tblr-danger-border-subtle, #e6bcb3);
}

/* Atencao: a escola opera, mas falta um passo. */
.surf-aviso--warning {
    --surf-aviso-tone: var(--tblr-warning, #c08a3e);
    --surf-aviso-bg: var(--tblr-warning-bg-subtle, #f7eedf);
    --surf-aviso-fg: var(--tblr-warning-text-emphasis, #8a622b);
    --surf-aviso-edge: var(--tblr-warning-border-subtle, #e6d0ab);
}

/* Comunicacao: nada pendente, so o estado atual. */
.surf-aviso--info {
    --surf-aviso-tone: var(--tblr-info, #4aa5a6);
    --surf-aviso-bg: var(--tblr-info-bg-subtle, #e4f1f0);
    --surf-aviso-fg: var(--tblr-info-text-emphasis, #23707a);
    --surf-aviso-edge: var(--tblr-info-border-subtle, #c2dfdb);
}

.surf-aviso__icone {
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1.35;
    color: var(--surf-aviso-fg);
}

.surf-aviso__corpo {
    flex: 1 1 auto;
    min-width: 0;
}

/* `h2` qualificado pelo caminho da pagina, e nao pela utilitaria `.h6`: o
   style.css do Backpack aplica 27px em todo `.page-body .container-fluid h2` e
   vence a utilitaria. Mesmo motivo (e mesma forma) de `.surf-agenda__title`. */
.page-body .container-fluid .surf-aviso__titulo {
    margin: 0 0 .35rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--surf-aviso-fg);
}

.surf-aviso__itens {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Uma pendencia por linha: o que falta a esquerda, o caminho para resolver a
   direita. A borda entre elas nao e enfeite -- sao coisas diferentes,
   resolvidas em telas diferentes, e sem separacao viravam um paragrafo so com
   dois botoes soltos no fim. */
.surf-aviso__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .9rem;
    padding: .4rem 0;
}

.surf-aviso__item + .surf-aviso__item {
    border-top: 1px solid var(--surf-aviso-edge);
}

.surf-aviso__item:first-child { padding-top: 0; }
.surf-aviso__item:last-child { padding-bottom: 0; }

/* `flex-basis` em rem, e nao `100%` nem `auto`: o texto so cede a linha para o
   botao quando sobra menos que isso, entao no celular o botao desce inteiro em
   vez de espremer a frase numa coluna de duas palavras. */
.surf-aviso__texto {
    flex: 1 1 14rem;
    min-width: 0;
    line-height: 1.45;
}

/* O PRAZO, dentro da frase.

   Nasceu do aviso de periodo de teste, que passou a dizer quanto falta
   ("Faltam 3 dias", "Ultimo dia"). O numero e a resposta que a pessoa procura
   na caixa, e nao pode chegar depois da frase inteira -- entao ele abre o
   texto, em negrito, e nao vira etiqueta nem cor propria.

   NENHUMA COR NOVA, de proposito. Usa o mesmo par ja medido no cabecalho
   (-text-emphasis sobre -bg-subtle: 4,72:1 no amarelo, o pior dos tres), que
   passa no minimo de 4,5:1 da WCAG mesmo sem contar a excecao de texto grande
   -- negrito de 14px nao alcanca os 18,66px que a excecao exige. Dar ao prazo
   um tom mais forte -- vermelho no ultimo dia, por exemplo -- diria com a cor o
   que a caixa inteira ja diz: no painel o vermelho significa "a escola nao
   opera", e no ultimo dia ela ainda opera.

   `nowrap` porque "Faltam 3 dias" quebrado entre duas linhas deixa o numero
   sozinho no fim da primeira -- exatamente o pedaco que precisa ser lido junto. */
.surf-aviso__prazo {
    font-weight: 700;
    color: var(--surf-aviso-fg);
    white-space: nowrap;

    /* Um respiro alem do espaco da frase. Sem ele "Faltam 3 dias" encosta em
       "Seu periodo de teste" e as duas viram uma so, que e o oposto do motivo
       de o prazo estar em negrito. E a mesma folga de um titulo corrido. */
    margin-right: .2rem;
}

/* Botao, e nao link de texto. E a unica acao da caixa, e precisa parecer
   clicavel sem depender da cor: o painel tem link colorido em toda tela, e
   mais um se perderia no meio da frase. */
.surf-aviso__acao {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;

    padding: .3rem .8rem;
    border-radius: .3rem;

    background-color: var(--surf-aviso-fg);
    color: #fff;

    font-size: .85rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}

/* Escurece no hover em vez de clarear: o rotulo e branco, entao clarear o
   fundo derrubaria justamente o contraste que a tabela do cabecalho garante. */
.surf-aviso__acao:hover,
.surf-aviso__acao:focus-visible {
    color: #fff;
    filter: brightness(.92);
}

.surf-aviso__acao:focus-visible {
    outline: 2px solid var(--surf-aviso-fg);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Variante de UMA LINHA, para o estado sem pendencia nenhuma

   O contrato comercial e informacao de consulta, nao aviso: quem ja configurou
   nao precisa reler o modelo todo dia. Uma caixa do mesmo tamanho das outras
   duas ensinaria a ignorar as tres -- e a que importa e a que aparece quando
   algo esta travado.
   --------------------------------------------------------------------------- */

.surf-aviso--linha {
    align-items: center;
    padding: .45rem .8rem;
    font-size: .85rem;
}

.surf-aviso--linha .surf-aviso__icone {
    font-size: 1rem;
}

.surf-aviso--linha .surf-aviso__acao {
    padding: .15rem .55rem;
    font-size: .78rem;
}