/* ============================================================================
   KDS Central — sistema visual
   ============================================================================

   Quem usa isto: dono de restaurante e gerente de loja, quase sempre no celular,
   muitas vezes no meio do serviço. As decisões abaixo saem daí:

   - Alvos de toque grandes (44px). Dedo com luva de cozinha, tela suja.
   - Contraste alto. A tela é olhada sob luz de cozinha e no sol da calçada.
   - Número grande e rótulo pequeno. O gestor quer o valor, não a legenda.
   - Verde/vermelho NUNCA sozinhos para indicar estado — sempre com texto ou forma
     junto. Daltonismo vermelho-verde atinge ~8% dos homens, e este público é
     majoritariamente masculino.

   Tema claro e escuro. O escuro não é enfeite: quem confere faturamento à meia-noite
   depois de fechar a casa não quer uma tela branca na cara.
   ============================================================================ */

:root {
    /* Marca. O laranja vem do fogo/brasa, o azul-noite dá o contraponto sério. */
    --marca:            #e8590c;
    --marca-forte:      #c2410c;
    --marca-suave:      #fff1e6;

    --tinta:            #1c1f26;   /* texto principal */
    --tinta-media:      #545b68;   /* texto secundário */
    --tinta-fraca:      #8b93a1;   /* legendas, placeholders */

    --fundo:            #f5f6f8;
    --superficie:       #ffffff;
    --superficie-alt:   #fafbfc;   /* cabeçalho de tabela, zebra */
    --borda:            #e3e6ea;
    --borda-forte:      #cbd1d9;

    --ok:               #0f7b3f;
    --ok-fundo:         #e8f5ee;
    --alerta:           #b45309;
    --alerta-fundo:     #fef4e6;
    --erro:             #b42318;
    --erro-fundo:       #fdecea;
    --info:             #1d4ed8;
    --info-fundo:       #eaf0fe;

    --raio:             10px;
    --raio-p:           6px;
    --sombra:           0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    --sombra-alta:      0 4px 12px rgba(16,24,40,.10), 0 2px 4px rgba(16,24,40,.06);

    /* Altura mínima de qualquer coisa clicável. */
    --toque:            44px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --marca:          #fb923c;
        --marca-forte:    #f97316;
        --marca-suave:    #2a1b12;

        --tinta:          #e8eaed;
        --tinta-media:    #a6adba;
        --tinta-fraca:    #767e8c;

        --fundo:          #14161a;
        --superficie:     #1c1f26;
        --superficie-alt: #22262e;
        --borda:          #2e333d;
        --borda-forte:    #414855;

        --ok:             #4ade80;
        --ok-fundo:       #10251a;
        --alerta:         #fbbf24;
        --alerta-fundo:   #2a2010;
        --erro:           #f87171;
        --erro-fundo:     #2a1414;
        --info:           #93b4fd;
        --info-fundo:     #141c2e;

        --sombra:         0 1px 2px rgba(0,0,0,.4);
        --sombra-alta:    0 4px 14px rgba(0,0,0,.5);
    }
}

/* ---------------------------------------------------------------- base ---- */

html {
    -webkit-text-size-adjust: 100%;
}

html, body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--fundo);
    color: var(--tinta);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--tinta);
    font-weight: 650;
    letter-spacing: -0.011em;
}

h1 { font-size: 1.55rem; }
h2 { font-size: 1.28rem; }
h3 { font-size: 1.1rem; }

h1:focus { outline: none; }

a {
    color: var(--marca-forte);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

code, .font-monospace, .fonte-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .9em;
}

.text-muted { color: var(--tinta-media) !important; }
.small { font-size: .855rem; }

/* --------------------------------------------------------------- cartão ---- */

.card {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--borda);
    font-weight: 620;
    color: var(--tinta);
    padding: .8rem 1rem;
    font-size: .95rem;
}

.card-body { padding: 1rem; }

.card-footer {
    background: var(--superficie-alt);
    border-top: 1px solid var(--borda);
    color: var(--tinta-media);
}

/* --------------------------------------------------------------- botões ---- */

.btn {
    border-radius: var(--raio-p);
    font-weight: 550;
    padding: .5rem .95rem;
    min-height: var(--toque);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }

.btn-sm {
    padding: .35rem .7rem;
    font-size: .875rem;
    /* Continua confortável no dedo mesmo sendo "sm". */
    min-height: 38px;
}

.btn-primary {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--marca-forte);
    border-color: var(--marca-forte);
    color: #fff;
}
.btn-primary:disabled {
    background: var(--marca);
    border-color: var(--marca);
    opacity: .5;
}

.btn-outline-secondary {
    color: var(--tinta-media);
    border-color: var(--borda-forte);
    background: var(--superficie);
}
.btn-outline-secondary:hover {
    background: var(--superficie-alt);
    color: var(--tinta);
    border-color: var(--tinta-fraca);
}

.btn-outline-primary {
    color: var(--marca-forte);
    border-color: var(--marca);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

.btn-danger { background: var(--erro); border-color: var(--erro); color: #fff; }
.btn-outline-danger {
    color: var(--erro);
    border-color: var(--erro);
    background: transparent;
}
.btn-outline-danger:hover { background: var(--erro); color: #fff; }

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

/* --------------------------------------------------------------- campos ---- */

.form-label {
    font-weight: 560;
    font-size: .875rem;
    color: var(--tinta-media);
    margin-bottom: .3rem;
}

.form-control, .form-select {
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    color: var(--tinta);
    min-height: var(--toque);
    padding: .5rem .7rem;
}
.form-control-sm, .form-select-sm { min-height: 38px; padding: .35rem .6rem; }

.form-control::placeholder { color: var(--tinta-fraca); }

.form-control:focus, .form-select:focus {
    background: var(--superficie);
    color: var(--tinta);
    border-color: var(--marca);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent);
}

.form-control:disabled, .form-select:disabled {
    background: var(--superficie-alt);
    color: var(--tinta-fraca);
}

.form-text { color: var(--tinta-media); font-size: .84rem; }

.input-group-text {
    background: var(--superficie-alt);
    border-color: var(--borda-forte);
    color: var(--tinta-media);
}

.form-check-input { border-color: var(--borda-forte); }
.form-check-input:checked {
    background-color: var(--marca);
    border-color: var(--marca);
}
.darker-border-checkbox.form-check-input { border-color: var(--borda-forte); }

/* Estado de validação: cor + espessura, nunca só cor. */
.valid.modified:not([type=checkbox]) { border-color: var(--ok); }
.invalid { border-color: var(--erro); border-width: 2px; }
.validation-message { color: var(--erro); font-size: .85rem; }

/* -------------------------------------------------------------- tabelas ---- */

.table {
    color: var(--tinta);
    border-color: var(--borda);
    margin-bottom: 0;
}

.table > thead {
    background: var(--superficie-alt);
}

.table > thead th {
    color: var(--tinta-media);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .035em;
    border-bottom: 1px solid var(--borda);
    padding: .65rem .75rem;
    white-space: nowrap;
}

.table > tbody td {
    border-color: var(--borda);
    padding: .7rem .75rem;
    vertical-align: middle;
}

.table-light { background: var(--superficie-alt) !important; }
.table-hover > tbody > tr:hover > * {
    background: var(--marca-suave);
    color: var(--tinta);
}

/* A tabela vira lista rolável em vez de espremer colunas no celular. */
.table-responsive {
    border-radius: var(--raio);
    border: 1px solid var(--borda);
    background: var(--superficie);
    overflow-x: auto;
}
.table-responsive .table { border-collapse: separate; }

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

.badge {
    font-weight: 580;
    font-size: .76rem;
    padding: .32em .6em;
    border-radius: 999px;
    letter-spacing: .01em;
}

.bg-success { background: var(--ok) !important; }
.bg-danger  { background: var(--erro) !important; }
.bg-warning { background: var(--alerta) !important; color: #fff !important; }
.bg-info    { background: var(--info) !important; color: #fff !important; }
.bg-secondary { background: var(--tinta-fraca) !important; }

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

.alert {
    border-radius: var(--raio);
    border: 1px solid transparent;
    border-left-width: 4px;
    padding: .8rem 1rem;
    font-size: .93rem;
}

.alert-success { background: var(--ok-fundo);     border-color: var(--ok);     color: var(--tinta); }
.alert-danger  { background: var(--erro-fundo);   border-color: var(--erro);   color: var(--tinta); }
.alert-warning { background: var(--alerta-fundo); border-color: var(--alerta); color: var(--tinta); }
.alert-info    { background: var(--info-fundo);   border-color: var(--info);   color: var(--tinta); }
.alert-secondary { background: var(--superficie-alt); border-color: var(--borda-forte); color: var(--tinta-media); }

/* --------------------------------------------- indicador de conexão -------- */

/* Bolinha + texto. A cor sozinha não comunica para quem não distingue verde de
   vermelho — por isso todo uso vem acompanhado de rótulo. */
.ponto-estado {
    width: 9px; height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: none;
}
.ponto-estado.on  { background: var(--ok);   box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.ponto-estado.off { background: var(--erro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--erro) 18%, transparent); }

/* ------------------------------------------------------------ KPI / mét. --- */

.grade-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
}

.kpi {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: .85rem .95rem;
    box-shadow: var(--sombra);
}

.kpi-rotulo {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-media);
    font-weight: 620;
}

.kpi-valor {
    font-size: 1.9rem;
    font-weight: 680;
    line-height: 1.15;
    margin-top: .15rem;
    /* Números alinham em coluna mesmo com larguras diferentes. */
    font-variant-numeric: tabular-nums;
}

.kpi-nota { font-size: .78rem; color: var(--tinta-fraca); }

.kpi.destaque-alerta .kpi-valor { color: var(--alerta); }
.kpi.destaque-erro   .kpi-valor { color: var(--erro); }
.kpi.destaque-ok     .kpi-valor { color: var(--ok); }

/* ------------------------------------------------------- estado vazio ------ */

.vazio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--tinta-media);
}
.vazio-titulo { font-weight: 620; color: var(--tinta); margin-bottom: .25rem; }
.vazio-dica { font-size: .88rem; color: var(--tinta-fraca); }

/* ------------------------------------------------------------ conteúdo ----- */

.content { padding-top: 1.1rem; }

/* --------------------------------------------------- erro do Blazor -------- */

.blazor-error-boundary {
    background: var(--erro);
    padding: 1rem 1.25rem;
    color: #fff;
    border-radius: var(--raio);
}
.blazor-error-boundary::after {
    content: "Alguma coisa deu errado nesta parte da tela. Recarregue a página."
}

/* Barra de reconexão do Blazor. O texto vem do próprio framework, em inglês —
   escondemos e escrevemos o nosso em português via ::after (ver App.razor). */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1080;
    background: var(--tinta);
    color: #fff;
    padding: .85rem 1rem;
    text-align: center;
    font-size: .92rem;
    box-shadow: var(--sombra-alta);
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}
/* Esconde o texto que o framework injeta e coloca o nosso. */
#components-reconnect-modal > * { display: none; }
#components-reconnect-modal.components-reconnect-show::after {
    content: "Reconectando com o servidor...";
}
#components-reconnect-modal.components-reconnect-failed::after {
    content: "Sem conexão com o servidor. Recarregue a página.";
}
#components-reconnect-modal.components-reconnect-rejected::after {
    content: "A central foi atualizada. Recarregue a página — alterações não salvas serão perdidas.";
}

/* ------------------------------------------------------------- celular ----- */

@media (max-width: 640px) {
    html, body { font-size: 15px; }
    h1 { font-size: 1.35rem; }
    h2 { font-size: 1.15rem; }
    .card-body { padding: .85rem; }
    .kpi-valor { font-size: 1.65rem; }

    /* Botão em linha vira botão de largura cheia: erra menos o toque. */
    .btn-bloco-mobile { width: 100%; }
}

/* Quem pediu menos animação no sistema não recebe nenhuma. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}