/* =====================================================================================
   EFICÁCIA CRM — mod-bo-notificacoes.css · Backoffice ▸ Notificações

   Duas regras que não são estética e que a auditoria responsiva mede:

     · TUDO O QUE SE TOCA TEM 44px em ecrãs de toque. Neste ecrã isso apanha o botão de
       teste e, sobretudo, os interruptores de notificação — que decidem se o aviso de
       uma folha de obra atribuída chega a uma pessoa. Foi exactamente por ignorar isto
       que o selo de Estado do `mod-backoffice.css` juntou 56 violações críticas: parecia
       uma etiqueta e era um botão.

     · A TABELA DO REGISTO NÃO PODE EMPURRAR A PÁGINA. Seis colunas não cabem a 390px, e
       uma página que anda para o lado é uma página estragada. Abaixo de 900px a
       `.ds-table` do design-system passa a cartões (é ela que lê o `data-label` de cada
       célula, em design-system.css:1697); acima disso o `.ds-table-wrap` já rola dentro
       de si próprio. Aqui só se acrescenta o `min-width` que impede as colunas de se
       esmagarem antes desse ponto.

   Mobile-first: o que está fora de media query é o telemóvel; as media queries acrescentam
   para cima. As cores saem dos tokens do design-system, com valor de recurso — este
   ficheiro pode ser carregado antes de o tema estar resolvido.
   ===================================================================================== */

.bon {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bon-sec {
    min-width: 0;
    /* Sem isto, um filho largo (a tabela) recusa-se a encolher dentro do flex e é a
       PÁGINA que passa a rolar para o lado. É a origem mais comum de violação crítica
       na auditoria e não se vê a olho até acontecer. */
}

.bon-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: var(--fw-semibold, 600);
    color: var(--ink-900, #0f172a);
}

.bon-conta {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface-2, #f1f5f9);
    color: var(--ink-500, #6b7280);
    font-size: 12px;
    font-weight: var(--fw-medium, 500);
}

/* ---- avisos ---------------------------------------------------------------------- */

.bon-aviso {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    margin: 0 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.bon-aviso strong {
    display: block;
}

.bon-aviso--ensaio {
    background: var(--green-50, #ecfdf5);
    border-color: var(--green-200, #a7f3d0);
    color: var(--green-800, #065f46);
}

/* «Envio a sério» é o estado PERIGOSO deste ecrã, e por isso é o que leva a cor de aviso.
   Ao contrário do resto da aplicação, aqui o verde é o modo travado: o que se está a
   sinalizar é «isto sai mesmo para clientes», e não «está tudo bem». */
.bon-aviso--vivo {
    background: var(--amber-50, #fffbeb);
    border-color: var(--amber-200, #fde68a);
    color: var(--amber-800, #92400e);
}

.bon-aviso code,
.bon-motivo code,
.ds-help code,
.bon-destino {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--surface-2, #f1f5f9);
    border: 1px solid var(--border, #e5e7eb);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
    /* Um host de SMTP ou um endereço de email não têm espaços para quebrar: sem isto
       estouram a caixa a 320px. */
    word-break: break-all;
}

.bon-motivo {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--ink-500, #6b7280);
}

/* ---- grelha chave/valor ---------------------------------------------------------- */

.bon-grelha {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--border, #e5e7eb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
}

.bon-kv {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface, #fff);
    font-size: 13px;
}

.bon-kv-k {
    color: var(--ink-500, #6b7280);
}

.bon-kv-v {
    color: var(--ink-900, #0f172a);
    font-weight: var(--fw-medium, 500);
    text-align: right;
    min-width: 0;
    word-break: break-all;
}

.bon-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
}

/* ---- selos ----------------------------------------------------------------------- */

.bon-selo {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: var(--fw-semibold, 600);
    line-height: 1.5;
    white-space: nowrap;
}

.bon-selo--ok {
    background: var(--green-50, #ecfdf5);
    border-color: var(--green-200, #a7f3d0);
    color: var(--green-700, #047857);
}

.bon-selo--ensaio {
    background: var(--blue-50, #eff6ff);
    border-color: var(--blue-200, #bfdbfe);
    color: var(--blue-700, #1d4ed8);
}

.bon-selo--off {
    background: var(--surface-2, #f1f5f9);
    border-color: var(--border, #e5e7eb);
    color: var(--ink-500, #6b7280);
}

.bon-selo--erro {
    background: var(--red-50, #fef2f2);
    border-color: var(--red-200, #fecaca);
    color: var(--red-700, #b91c1c);
}

/* ---- caixa do envio de teste ------------------------------------------------------ */

.bon-teste {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding: 14px;
    border: 1px dashed var(--border, #e5e7eb);
    border-radius: 10px;
    background: var(--surface-2, #f8fafc);
}

.bon-teste-txt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-600, #475569);
}

/* O botão de teste ocupa a largura toda no telemóvel — é a única acção da secção e não há
   nada a competir com ela. A partir do tablet volta ao tamanho natural, ao lado do texto. */
.bon-btn-teste {
    width: 100%;
    min-height: var(--ds-touch, 44px);
    justify-content: center;
}

.bon-resultado {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.45;
}

.bon-resultado--ok {
    background: var(--green-50, #ecfdf5);
    border-color: var(--green-200, #a7f3d0);
    color: var(--green-800, #065f46);
}

.bon-resultado--erro {
    background: var(--red-50, #fef2f2);
    border-color: var(--red-200, #fecaca);
    color: var(--red-700, #b91c1c);
}

/* ---- tabela do registo ------------------------------------------------------------ */

.bon-tabela {
    /* Só a partir do ponto em que a tabela volta a ser tabela. Em modo cartão um
       `min-width` obrigaria a página a rolar para o lado — o oposto do que se quer. */
    width: 100%;
}

.bon-igual {
    color: var(--ink-400, #94a3b8);
    font-style: italic;
}

.bon-anexos,
.bon-quem {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    color: var(--ink-500, #6b7280);
    font-size: 12px;
    white-space: nowrap;
}

.bon-erro-txt {
    display: block;
    margin-top: 3px;
    color: var(--red-600, #dc2626);
    font-size: 12px;
    line-height: 1.4;
    word-break: break-word;
}

/* ---- preferências por colaborador -------------------------------------------------- */

.bon-escolha {
    max-width: 380px;
}

.bon-escolha .ds-input {
    min-height: var(--ds-touch, 44px);
}

.bon-grupo {
    margin-top: 16px;
}

.bon-tipos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

/* O ALVO É A LINHA INTEIRA, não a caixa de 16px. Um <label> a envolver o input dá isto de
   graça e é a diferença entre acertar à primeira e desligar o aviso errado. */
.bon-tipo {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-height: var(--ds-touch, 44px);
    padding: 10px 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: var(--surface, #fff);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.bon-tipo:hover {
    border-color: var(--ink-300, #cbd5e1);
}

.bon-tipo:focus-within {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px var(--primary-100, rgba(37, 99, 235, .15));
}

.bon-check {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--primary, #2563eb);
    cursor: pointer;
}

.bon-tipo-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bon-tipo-nome {
    font-size: 14px;
    font-weight: var(--fw-medium, 500);
    color: var(--ink-900, #0f172a);
}

.bon-tipo-nota {
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-500, #6b7280);
}

/* =====================================================================================
   Ecrãs maiores — a partir daqui há espaço para pôr coisas lado a lado.
   ===================================================================================== */

@media (min-width: 640px) {

    .bon-grelha {
        grid-template-columns: 1fr 1fr;
    }

    .bon-teste {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .bon-btn-teste {
        width: auto;
        flex: none;
    }

    .bon-tipos {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (min-width: 900px) {

    /* A tabela volta a ser tabela (a `.ds-table` sai do modo cartão): agora sim faz
       sentido garantir uma largura mínima às seis colunas, porque quem rola é o
       `.ds-table-wrap` e não a página. */
    .bon-tabela {
        min-width: 720px;
    }
}

/* Em rato, os 44px de alvo desarrumam a lista sem ninguém ganhar nada — a regra dos 44px é
   para o dedo. O critério é o ponteiro e não a largura: um portátil pequeno tem rato, um
   tablet grande não tem. */
@media (pointer: fine) {

    .bon-tipo {
        min-height: 0;
    }

    .bon-escolha .ds-input,
    .bon-btn-teste {
        min-height: 36px;
    }
}