/* Qbit Truck — camada visual sobre o tema Radzen.
   Usa só as variáveis do tema (--rz-*), então funciona em todos os temas, inclusive o Dark. */

:root {
    --qb-raio: 14px;
    --qb-raio-sm: 8px;
    --qb-cor-borda: color-mix(in srgb, var(--rz-text-color) 11%, transparent);
    --qb-borda: 1px solid var(--qb-cor-borda);
    --qb-fundo-pagina: color-mix(in srgb, var(--rz-text-color) 4%, var(--rz-body-background-color));
    --qb-fundo-suave: color-mix(in srgb, var(--rz-text-color) 3%, var(--rz-base-background-color));
    --qb-sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --qb-sombra-hover: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .05);
    --qb-header-altura: 64px;
    --qb-primaria-suave: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    --qb-fonte: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body {
    font-family: var(--qb-fonte);
    background: var(--rz-body-background-color);
    -webkit-font-smoothing: antialiased;
}

.rz-layout {
    background: var(--qb-fundo-pagina);
}

/* ---------- Cabeçalho ---------- */

.rz-header.qb-header {
    /* o Radzen 12 marca o header como fixed; aqui ele fica no grid, ao lado do menu */
    position: relative;
    left: auto;
    right: auto;
    height: var(--qb-header-altura);
    background: color-mix(in srgb, var(--rz-base-background-color) 85%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: var(--qb-borda);
    box-shadow: none;
    color: var(--rz-text-color);
}

.qb-header-conteudo {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.25rem 0 .5rem;
}

.qb-header-esquerda, .qb-header-direita {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.qb-header .rz-sidebar-toggle {
    color: var(--rz-text-secondary-color);
    border-radius: var(--qb-raio-sm);
}

.qb-tema {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--rz-text-secondary-color);
}

    .qb-tema .rz-dropdown {
        width: 8.5rem;
        border-radius: 999px;
    }

.qb-usuario {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .25rem .9rem .25rem .25rem;
    border-radius: 999px;
    border: var(--qb-borda);
    color: var(--rz-text-color);
    text-decoration: none;
    font-size: .875rem;
    transition: background-color .15s, border-color .15s;
    min-width: 0;
}

    .qb-usuario:hover {
        background: var(--qb-primaria-suave);
        border-color: var(--rz-primary);
        color: var(--rz-text-color);
    }

.qb-avatar {
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--rz-primary);
    color: var(--rz-on-primary);
    font-weight: 600;
}

.qb-usuario-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Marca ---------- */

.qb-marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
    white-space: nowrap;
}

    .qb-marca img {
        width: 2.5rem;
        height: 2.5rem;
        object-fit: contain;
    }

.qb-marca-sidebar {
    height: var(--qb-header-altura);
    padding: 0 1.25rem;
    color: var(--rz-sidebar-color);
    border-bottom: 1px solid color-mix(in srgb, var(--rz-sidebar-color) 12%, transparent);
}

/* ---------- Menu lateral ---------- */

.rz-sidebar.qb-sidebar {
    border-right: none;
    display: flex;
    flex-direction: column;
}

.qb-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .75rem .75rem 1rem;
    flex: 1;
}

.qb-nav-secao {
    margin: 1rem .75rem .35rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--rz-sidebar-color) 55%, transparent);
}

.qb-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .6rem .75rem;
    border: none;
    border-radius: 10px;
    background: none;
    color: color-mix(in srgb, var(--rz-sidebar-color) 85%, transparent);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

    .qb-nav-link .rzi {
        font-size: 1.25rem;
        opacity: .85;
    }

    .qb-nav-link:hover {
        background: color-mix(in srgb, var(--rz-sidebar-color) 10%, transparent);
        color: var(--rz-sidebar-color);
    }

    .qb-nav-link.active {
        background: var(--rz-primary);
        color: var(--rz-on-primary);
        box-shadow: 0 2px 6px color-mix(in srgb, var(--rz-primary) 35%, transparent);
    }

        .qb-nav-link.active .rzi {
            opacity: 1;
        }

.qb-nav-sair {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--rz-sidebar-color) 12%, transparent);
}

/* ---------- Área de conteúdo ---------- */

.rz-body.qb-body {
    background: var(--qb-fundo-pagina);
    padding: 0;
}

.qb-conteudo {
    padding: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* As telas usam um RadzenFieldset como contêiner: vira um cartão com título de página */
.qb-conteudo > .rz-fieldset,
.qb-conteudo > div > .rz-fieldset {
    background: var(--rz-base-background-color);
    border: var(--qb-borda);
    border-radius: var(--qb-raio);
    box-shadow: var(--qb-sombra);
    padding: 1.25rem 1.5rem 1.5rem;
    margin: 0;
}

    .qb-conteudo > .rz-fieldset > .rz-fieldset-legend,
    .qb-conteudo > div > .rz-fieldset > .rz-fieldset-legend {
        float: left;
        width: 100%;
        padding: 0 0 1rem;
        margin: 0 0 1.25rem;
        border-bottom: var(--qb-borda);
        background: none;
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: -.01em;
        color: var(--rz-text-color);
    }

        .qb-conteudo > .rz-fieldset > .rz-fieldset-content-wrapper > .rz-fieldset-content,
        .qb-conteudo > div > .rz-fieldset > .rz-fieldset-content-wrapper > .rz-fieldset-content {
            padding: 0;
        }

        .qb-conteudo > .rz-fieldset > .rz-fieldset-legend + *,
        .qb-conteudo > div > .rz-fieldset > .rz-fieldset-legend + * {
            clear: both;
        }

        .qb-conteudo > .rz-fieldset > .rz-fieldset-legend .rzi,
        .qb-conteudo > div > .rz-fieldset > .rz-fieldset-legend .rzi {
            width: 2.25rem;
            height: 2.25rem;
            margin: 0 .65rem 0 0 !important;
            border-radius: 10px;
            display: inline-grid;
            place-items: center;
            vertical-align: middle;
            font-size: 1.3rem;
            background: var(--qb-primaria-suave);
            color: var(--rz-primary);
        }

        .qb-conteudo > .rz-fieldset > .rz-fieldset-legend b,
        .qb-conteudo > div > .rz-fieldset > .rz-fieldset-legend b {
            font-weight: 600;
        }

/* Fieldsets internos (grupos de filtros, seções de formulário) */
.rz-fieldset .rz-fieldset {
    border: var(--qb-borda);
    border-radius: 12px;
    background: var(--rz-base-background-color);
}

    .rz-fieldset .rz-fieldset > .rz-fieldset-legend {
        font-size: .9rem;
        font-weight: 600;
        border-radius: 8px;
    }

/* ---------- Cartões ---------- */

.rz-card {
    border-radius: var(--qb-raio);
    border: var(--qb-borda);
    box-shadow: var(--qb-sombra);
}

    .rz-card.pointer {
        transition: box-shadow .2s, transform .2s, border-color .2s;
    }

        .rz-card.pointer:hover {
            box-shadow: var(--qb-sombra-hover);
            border-color: color-mix(in srgb, var(--rz-primary) 40%, var(--qb-cor-borda));
            transform: translateY(-1px);
        }

/* ---------- Grids ---------- */

.rz-data-grid {
    border-radius: 12px;
    border: var(--qb-borda);
    overflow: hidden;
    box-shadow: none;
}

    .rz-data-grid .rz-grid-table thead th {
        background: var(--qb-fundo-suave);
    }

        .rz-data-grid .rz-grid-table thead th .rz-column-title-content {
            font-size: .72rem;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--rz-text-secondary-color);
        }

    .rz-data-grid .rz-grid-table tbody tr {
        transition: background-color .12s;
    }

        .rz-data-grid .rz-grid-table tbody tr:hover > td {
            background: var(--qb-primaria-suave);
        }

    .rz-data-grid .rz-paginator {
        border-top: var(--qb-borda);
    }

/* ---------- Botões e campos ---------- */

.rz-button {
    border-radius: var(--qb-raio-sm);
    font-weight: 600;
    letter-spacing: .01em;
}

    .rz-button.rz-primary:not(.rz-variant-text):not(.rz-variant-outlined) {
        box-shadow: 0 1px 2px color-mix(in srgb, var(--rz-primary) 30%, transparent);
    }

.rz-textbox, .rz-textarea, .rz-dropdown, .rz-numeric, .rz-datepicker > .rz-inputtext,
.rz-multiselect, .rz-autocomplete, .rz-password {
    border-radius: var(--qb-raio-sm);
}

.rz-badge {
    border-radius: 999px;
    font-weight: 600;
}

/* ---------- Diálogos ---------- */

.rz-dialog {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 48px rgba(16, 24, 40, .18);
}

.rz-dialog-titlebar {
    border-bottom: var(--qb-borda);
}

.rz-dialog-title {
    font-weight: 600;
}

/* ---------- Início ---------- */

.qb-kpi {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
}

.qb-kpi-icone {
    width: 3rem;
    height: 3rem;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    background: var(--qb-primaria-suave);
    color: var(--rz-primary);
}

.qb-kpi-rotulo {
    font-size: .85rem;
    color: var(--rz-text-secondary-color);
}

.qb-kpi-valor {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--rz-text-color);
}

.qb-kpi-periodo {
    font-size: .75rem;
    color: var(--rz-text-tertiary-color);
}

.qb-card-titulo {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .25rem;
    color: var(--rz-text-color);
}

.qb-card-subtitulo {
    font-size: .8rem;
    color: var(--rz-text-secondary-color);
    margin-bottom: .75rem;
}

/* ---------- Login ---------- */

.qb-login-fundo {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--rz-primary) 14%, var(--rz-base-background-color)) 0%, var(--rz-base-background-color) 55%, color-mix(in srgb, var(--rz-primary) 8%, var(--rz-base-background-color)) 100%);
}

.qb-login {
    width: 100%;
    max-width: 880px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--rz-base-background-color);
    border: var(--qb-borda);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .14);
}

.qb-login-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2.5rem;
    text-align: center;
    background: linear-gradient(160deg, var(--rz-primary), var(--rz-primary-dark));
    color: var(--rz-on-primary);
}

    .qb-login-marca img {
        width: 11rem;
        height: 11rem;
        object-fit: contain;
        background: #fff;
        border-radius: 50%;
        padding: .75rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
    }

    .qb-login-marca h1 {
        font-size: 1.6rem;
        font-weight: 700;
        margin: 0;
        letter-spacing: -.02em;
    }

    .qb-login-marca p {
        margin: 0;
        opacity: .85;
        font-size: .95rem;
    }

.qb-login-form {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
}

    .qb-login-form h2 {
        font-size: 1.4rem;
        font-weight: 700;
        margin: 0;
        letter-spacing: -.01em;
        color: var(--rz-text-color);
    }

    .qb-login-form .qb-login-sub {
        margin: 0 0 .75rem;
        color: var(--rz-text-secondary-color);
        font-size: .9rem;
    }

    .qb-login-form .rz-button {
        width: 100%;
        height: 2.75rem;
    }

/* ---------- Celular ---------- */

@media (max-width: 768px) {
    .qb-header-conteudo {
        padding: 0 .5rem 0 .25rem;
        gap: .5rem;
    }

    .qb-header-esquerda, .qb-header-direita {
        gap: .4rem;
    }

    .qb-header .qb-marca span {
        display: none;
    }

    /* menu vira gaveta por cima do conteúdo */
    .rz-sidebar.qb-sidebar.rz-sidebar-expanded {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1001;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35), 0 10px 40px rgba(0, 0, 0, .3);
    }

    .qb-conteudo {
        padding: 1rem .75rem;
    }

    .qb-usuario-nome, .qb-tema .rzi {
        display: none;
    }

    .qb-usuario {
        padding: .25rem;
    }

    .qb-tema .rz-dropdown {
        width: 6.75rem;
    }

    .qb-conteudo > .rz-fieldset,
    .qb-conteudo > div > .rz-fieldset {
        padding: 1rem;
    }

    .qb-login {
        grid-template-columns: 1fr;
    }

    .qb-login-marca {
        padding: 1.75rem;
    }

        .qb-login-marca img {
            width: 7rem;
            height: 7rem;
        }

    .qb-login-form {
        padding: 1.75rem;
    }
}

/* O login ocupa a tela toda: tira o espaçamento do contêiner do layout */
.rz-p-4:has(> .qb-login-fundo),
.rz-body:has(.qb-login-fundo) {
    padding: 0 !important;
}

/* ---------- Gráficos do início ---------- */

.qb-grafico .rz-chart {
    font-family: var(--qb-fonte);
}

.qb-grafico-vazio {
    height: var(--qb-grafico-altura);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--rz-text-tertiary-color);
    font-size: .875rem;
    border: 1px dashed var(--qb-cor-borda);
    border-radius: 12px;
}

    .qb-grafico-vazio .rzi {
        font-size: 2rem;
        opacity: .6;
    }

.qb-donut-centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.qb-donut-valor {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rz-text-color);
}

.qb-donut-rotulo {
    font-size: .75rem;
    color: var(--rz-text-secondary-color);
}

.qb-secao-graficos {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .5rem;
}

.qb-secao-titulo {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

/* Dashboard cabe na tela: a altura dos gráficos acompanha a janela
   (cabeçalho, cards do topo, título da seção e moldura dos cartões somam ~460px) */
.qb-dashboard {
    --qb-grafico-altura: clamp(150px, calc((100vh - 460px) / 2), 280px);
}

    .qb-dashboard .rz-card {
        padding: .875rem 1rem;
    }

    .qb-dashboard .qb-kpi-icone {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.35rem;
    }

    .qb-dashboard .qb-kpi-valor {
        font-size: 1.6rem;
    }

    .qb-dashboard .qb-card-subtitulo {
        margin-bottom: .25rem;
    }

    .qb-dashboard .qb-secao-graficos {
        margin-top: 0;
    }

.qb-grafico-area {
    height: var(--qb-grafico-altura);
}

.qb-conteudo:has(> .qb-dashboard) {
    padding-top: 1rem;
    padding-bottom: 1rem;
}