/* Quando o main-view-content contiver o HomeView (homeview-root), fundo branco */
#main-view-content:has(.homeview-root) {
    background-color: #ffffff;
    overflow-x: hidden; /* segurança extra */
}

    /* Opcional: também pintar interior */
    #main-view-content:has(.homeview-root) .main-toolbar,
    #main-view-content:has(.homeview-root) .main-content {
        background-color: #ffffff;
    }

/* Root ocupa toda a altura visível */
/*.homeview-root {
    min-height: 100vh;
}
*/
.homeview-container {
    /*min-height: 100vh;*/
    width: 100%;
    padding-top: 20px;
    /*padding: 15px;*/
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
/* Se estiveres a usar um wrapper interno */
.homeview-inner {
    width: 100%;
}

/* HEADER – 100% width e conteúdo centrado */
.homeview-header {
    width: 100%;
    display: flex;
    flex-direction: column; /* logo em cima, texto em baixo */
    align-items: center; /* centra horizontalmente */
    justify-content: center;
    text-align: center; /* centra texto */
    gap: 10px;
    margin: 0; /* garante que não “descola” do topo */
}

.homeview-logo {
    max-width: 220px;
    margin-bottom: 4px;
}

/* bloco do título centrado */
.homeview-title-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

/* Pílula centrada */
.homeview-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(2, 175, 67, 0.08);
    color: #15803d;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 auto 4px; /* ⬅️ centra a pill */
}

.homeview-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #111827;
}

.homeview-subtitle {
    font-size: 0.95rem;
    color: #6b7280;
}

/* Cards dos módulos */
.homeview-cards-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.homeview-card {
    padding: 14px 14px 16px;
    border-radius: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, border-color 0.16s;
}

    .homeview-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
        border-color: rgba(2, 175, 67, 0.6);
    }

.homeview-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

.homeview-card-text {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Tag HST / SA / CP / MT */
.homeview-module-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(2, 175, 67, 0.09);
    color: #15803d;
    margin-bottom: 4px;
}

/* Botões */
.homeview-actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center; /* botões centrados também */
}

.homeview-btn-primary,
.homeview-btn-secondary {
    border-radius: 999px;
    font-size: 0.9rem;
    padding: 8px 18px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.homeview-btn-primary {
    background: linear-gradient(135deg, #02AF43, #22c55e);
    color: white;
    box-shadow: 0 12px 30px rgba(34, 197, 94, 0.50);
}

    .homeview-btn-primary:hover {
        filter: brightness(1.05);
    }

.homeview-btn-secondary {
    background: #ffffff;
    color: #111827;
    border: 1px solid #d1d5db;
}

    .homeview-btn-secondary:hover {
        background: #f3f4f6;
    }

/* DASHBOARD NA HOME */
.homeview-dashboard {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* KPIs */
.homeview-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.homeview-kpi {
    background: #f9fafb;
    border-radius: 16px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.homeview-kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
}

.homeview-kpi-value {
    font-size: 1.4rem;
    font-weight: 600;
    color: #111827;
}

.homeview-kpi-sub {
    font-size: 0.78rem;
    color: #6b7280;
}

/* Charts */
.homeview-charts-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr);
    gap: 18px;
}

.homeview-chart-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 14px 6px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
    min-width: 0;
}

    /* Obriga o DxChart a caber dentro do card */
    .homeview-chart-card .dxbs-chart,
    .homeview-chart-card .dxbs-chart svg,
    .homeview-chart-card .dxbs-chart canvas {
        max-width: 100% !important;
        width: 100% !important;
    }

    .homeview-chart-card h4 {
        font-size: 0.95rem;
        font-weight: 600;
        margin-bottom: 6px;
        color: #111827;
    }

    .homeview-chart-card p {
        font-size: 0.78rem;
        color: #6b7280;
        margin-bottom: 6px;
    }

/* Responsivo */
@media (max-width: 900px) {
    .homeview-container {
        padding: 12px;
    }

    .homeview-cards-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .homeview-kpi-row,
    .homeview-charts-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .homeview-container {
        padding: 10px;
    }

    .homeview-cards-row {
        grid-template-columns: 1fr;
    }
}

/* Em ecrãs médios/pequenos, gráficos em stack vertical */
@media (max-width: 1200px) {
    .homeview-charts-row {
        grid-template-columns: 1fr;
    }
}