/*
 * Tema "alares" do Tactical RMM (web 0.101.x / Quasar 2) - por Gustavo, 25/09/2026.
 * O TRMM nao tem branding oficial: este CSS e injetado pelo nginx (sub_filter no index.html do
 * frontend, ver frontend.conf) e fica FORA de /var/www/rmm/dist, que o update.sh apaga e recria.
 * Ele so SOBRESCREVE variaveis/cores do Quasar - nada de JS, nada de mexer no bundle.
 * Fonte e reinstalacao: /var/www/rmm/alares/ + instala-tema.sh (rodar apos update do TRMM se o
 * frontend.conf perder o sub_filter). Paleta = mesma do tema do FOG (c:\scripts\fog\tema-alares).
 */
:root {
    --al-azul: #3C33F3;
    --al-azul-claro: #6e66ff;
    --al-azul-esc: #2a22c9;
    --al-marinho: #0e0a5e;
    --al-marinho-2: #17127a;
    --al-ciano: #9be8ff;
    --al-fundo: #f4f5fb;
    --al-borda: #e3e5f0;
    --al-hover: #eef0ff;

    --q-primary: var(--al-azul);
    --q-secondary: #1f9d55;
    --q-accent: var(--al-ciano);
    --q-dark: #14123a;
    --q-dark-page: #0d0b2a;
}
body.body--dark { --q-primary: var(--al-azul-claro); }

/* ---------------------------------------------------------------- barra superior */
.q-header.bg-grey-9 {
    background: linear-gradient(90deg, var(--al-marinho) 0%, var(--al-marinho-2) 100%) !important;
}
.q-header .q-toolbar__title {
    font-size: 0;                                           /* esconde "Tactical RMM" */
    min-height: 40px;
    padding-left: 118px;
    background: url("/alares/alares-logo-40.png") no-repeat 4px center;
    background-size: auto 26px;
    display: flex; align-items: center;
}
.q-header .q-toolbar__title::before {
    content: "RMM";
    font-size: 13px; font-weight: 600; letter-spacing: .08em;
    color: rgba(255, 255, 255, .75);
    margin-right: 8px;
}
.q-header .q-toolbar__title > * { font-size: 11px; }        /* versao (vX.Y.Z) continua visivel */

/* ---------------------------------------------------------------- login */
.bg-image {
    background-color: var(--al-azul) !important;
    background-image:
        url("/alares/alares-logo-80.png"),
        radial-gradient(circle at 20% 20%, rgba(155, 232, 255, .25) 0%, rgba(60, 51, 243, 0) 45%),
        linear-gradient(160deg, var(--al-azul) 0%, var(--al-azul-esc) 100%) !important;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: right 32px bottom 24px, 0 0, 0 0;
    background-size: auto 56px, 100% 100%, 100% 100%;
}
.bg-image .q-card { border-radius: 14px; box-shadow: 0 18px 48px rgba(14, 10, 94, .35); }
.bg-image .text-h4.ellipsis {
    font-size: 0;                                           /* esconde "Tactical RMM" */
    height: 96px;
    background: url("/alares/alares-logo-login.png") no-repeat center / auto 64px;
}
body:not(.body--dark) .bg-image .text-h4.ellipsis {
    /* logo branco sobre card claro: fundo azul atras do logo */
    background-color: var(--al-azul); border-radius: 10px; margin: 0 8px;
}
.bg-image .text-h4.ellipsis::after {
    content: "Gestao de estacoes - Infra TI";
    display: block; font-size: 12px; letter-spacing: .06em; color: rgba(255, 255, 255, .8);
    position: relative; top: 76px;
}
.bg-image .q-btn.bg-primary, .bg-image .q-btn--standard.bg-primary { background: var(--al-azul) !important; }

/* ---------------------------------------------------------------- detalhes gerais */
.q-tabs .q-tab__indicator { background: var(--q-primary); }
.q-table thead tr th { font-weight: 600; }
body:not(.body--dark) .q-page-container { background: var(--al-fundo); }
body:not(.body--dark) .q-table tbody tr:hover { background: var(--al-hover); }
a { color: var(--q-primary); }