/* ==================================================================
   SERVUS Design Tokens — v1.0
   Fonte: SERVUS_MANUAL_DE_MARCA.md (seção 8, "CSS institucional")
   Copiado sem alterações. Qualquer ajuste de marca deve ser feito
   aqui, nunca duplicando valores soltos em outras folhas de estilo.
   ================================================================== */
:root {
    /* Marca */
    --servus-navy: #17365d;
    --servus-blue: #2f80ed;
    --servus-teal: #20b7a5;
    --servus-gold: #f2b84b;
    /* Neutros */
    --servus-white: #ffffff;
    --servus-bg: #f5f8fc;
    --servus-border: #d8e1ec;
    --servus-text: #172b4d;
    --servus-text-muted: #44546a;
    --servus-night: #0e223d;
    /* Estados */
    --servus-success: #168577;
    --servus-warning: #a86400;
    --servus-danger: #c43d4b;
    --servus-info: #1769c2;
    /* Tipografia */
    --servus-font: "Nunito Sans", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Forma e elevação */
    --servus-radius-sm: 0.375rem;
    --servus-radius-md: 0.625rem;
    --servus-radius-lg: 1rem;
    --servus-shadow-sm: 0 2px 8px rgb(14 34 61 / 8%);
    --servus-shadow-md: 0 8px 24px rgb(14 34 61 / 12%);
    /* Foco acessível */
    --servus-focus: 0 0 0 3px rgb(47 128 237 / 30%);
    color-scheme: light dark;
}

a {
    color: #1769c2;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

    a:hover {
        color: var(--servus-navy);
    }

:focus-visible {
    outline: 2px solid var(--servus-blue);
    outline-offset: 2px;
    box-shadow: var(--servus-focus);
}

.servus-navbar,
.servus-sidebar {
    color: var(--servus-white);
    background: var(--servus-navy);
}

.servus-logo {
    display: block;
    width: auto;
    height: 40px;
    object-fit: contain;
}

.servus-card {
    border: 1px solid var(--servus-border);
    border-radius: var(--servus-radius-md);
    background: var(--servus-white);
    box-shadow: var(--servus-shadow-sm);
}

.servus-btn {
    min-height: 44px;
    padding: 0.625rem 1rem;
    border: 2px solid transparent;
    border-radius: var(--servus-radius-sm);
    font: 600 1rem/1 var(--servus-font);
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, color 160ms ease;
}

.servus-btn-primary {
    color: var(--servus-white);
    background: #1769c2;
}

    .servus-btn-primary:hover {
        background: var(--servus-navy);
    }

/* Secondary agora preenche o fundo no hover para garantir contraste */
.servus-btn-secondary {
    color: var(--servus-navy);
    border-color: var(--servus-navy);
    background: transparent;
}

    .servus-btn-secondary:hover {
        background: var(--servus-navy);
        color: var(--servus-white);
    }

.servus-btn-accent {
    color: var(--servus-night);
    background: var(--servus-gold);
}

    .servus-btn-accent:hover {
        background: #e5a935;
    }

.servus-badge-success {
    color: var(--servus-white);
    background: var(--servus-success);
}

.servus-alert-warning {
    color: #5c3700;
    border-left: 4px solid var(--servus-gold);
    background: #fff4d6;
}

/* ============================================================
   DARK MODE - Via Sistema Operacional (@media)
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --servus-bg: #0e223d;
        --servus-text: #eef4fb;
        --servus-text-muted: #c3d0df;
        --servus-border: #34506f;
    }

    .servus-card {
        background: #17365d;
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--servus-white);
    }

    /* Correção de Links no Modo Escuro */
    a {
        color: var(--servus-blue);
    }

        a:hover {
            color: var(--servus-white);
        }

    /* Evita que o Primary desapareça no card marinho no hover */
    .servus-btn-primary:hover {
        background: var(--servus-blue);
    }

    /* Secondary adaptado para Dark Mode */
    .servus-btn-secondary {
        color: var(--servus-text);
        border-color: var(--servus-border);
    }

        .servus-btn-secondary:hover {
            background: var(--servus-text);
            color: var(--servus-navy);
        }

    /* Badges e Alertas convertidos para tons translúcidos */
    .servus-alert-warning {
        background: rgba(242, 184, 75, 0.15); /* var(--servus-gold) */
        color: var(--servus-gold);
    }

    .servus-badge-success {
        background: rgba(32, 183, 165, 0.15); /* var(--servus-teal) */
        color: var(--servus-teal);
    }
}

/* ============================================================
   DARK MODE - Via Botão de Tema do Admin (body.dark-skin)
   ============================================================ */
body.default-skin {
    --servus-bg: #f5f8fc !important;
    --servus-text: #172b4d !important;
    --servus-text-muted: #44546a !important;
    --servus-border: #d8e1ec !important;
    color-scheme: light;
}

body.dark-skin {
    --servus-bg: #0e223d !important;
    --servus-text: #eef4fb !important;
    --servus-text-muted: #c3d0df !important;
    --servus-border: #34506f !important;
    color-scheme: dark;
}

    body.dark-skin .servus-card {
        background: #17365d;
    }

    body.dark-skin h1,
    body.dark-skin h2,
    body.dark-skin h3,
    body.dark-skin h4,
    body.dark-skin h5,
    body.dark-skin h6 {
        color: var(--servus-white);
    }

    /* Duplicação das correções de Dark Mode para o Toggle Manual */
    body.dark-skin a {
        color: var(--servus-blue);
    }

        body.dark-skin a:hover {
            color: var(--servus-white);
        }

    body.dark-skin .servus-btn-primary:hover {
        background: var(--servus-blue);
    }

    body.dark-skin .servus-btn-secondary {
        color: var(--servus-text);
        border-color: var(--servus-border);
    }

        body.dark-skin .servus-btn-secondary:hover {
            background: var(--servus-text);
            color: var(--servus-navy);
        }

    body.dark-skin .servus-alert-warning {
        background: rgba(242, 184, 75, 0.15);
        color: var(--servus-gold);
    }

    body.dark-skin .servus-badge-success {
        background: rgba(32, 183, 165, 0.15);
        color: var(--servus-teal);
    }

/* ==================================================================
   Extensões de componente usadas nas telas públicas do Hub.
   ================================================================== */
.servus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.servus-btn-sm {
    min-height: 38px;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
}

.servus-btn-xs {
    min-height: 34px;
    padding: 0.3rem 0.65rem;
    font-size: 0.76rem;
    border-radius: var(--servus-radius-sm);
}

@media (pointer: coarse) {
    .servus-btn-xs {
        min-height: 44px;
        padding: 0.5rem 0.9rem;
        font-size: 0.82rem;
    }
}

.servus-btn-teal {
    color: var(--servus-white);
    background: var(--servus-success);
}

    .servus-btn-teal:hover {
        background: #125f54;
    }

/* Hover adaptado para Dark Mode: clareia em vez de escurecer */
@media (prefers-color-scheme: dark) {
    .servus-btn-teal:hover {
        background: var(--servus-teal);
    }
}

body.dark-skin .servus-btn-teal:hover {
    background: var(--servus-teal);
}

/* Ghost Light Button agora preenche o fundo com branco no hover */
.servus-btn-ghost-light {
    color: var(--servus-white);
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
}

    .servus-btn-ghost-light:hover {
        background: var(--servus-white);
        color: var(--servus-navy) !important; /* Overrides globais de a:hover */
        border-color: var(--servus-white);
    }

.servus-badge-success {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.servus-alert-warning {
    padding: 10px 14px;
    border-radius: var(--servus-radius-sm);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}