* {
    box-sizing: border-box;
}

:root {
    --background: #0c0e11;
    --card: #171a1f;
    --card-hover: #1b1f25;
    --card-border: #272c33;

    --text: #f2f3f5;
    --muted: #858c96;

    --healthy: #63d98b;
    --warning: #f1c75b;
    --critical: #ff6b6b;
    --unknown: #858c96;
}


body {
    margin: 0;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


.container {
    width: 100%;
    max-width: 1000px;

    margin: auto;

    padding:
        28px 22px 50px;
}


/* HEADER */

.header {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 25px;

    margin-bottom: 32px;
}


h1 {
    margin: 0;
    font-size: 30px;
}


h2 {
    font-size: 19px;

    margin:
        30px 0 12px;
}


.page-title {
    margin-top: 12px;
}


.muted {
    color:
        var(--muted);

    margin-top: 5px;
}


.header-right {
    display: flex;

    align-items: center;

    gap: 20px;
}


.overall {
    font-weight: 700;
    font-size: 14px;
}


.logout,
.back-link,
.details-link {
    color:
        var(--muted);

    text-decoration: none;

    font-size: 14px;
}


.logout:hover,
.back-link:hover,
.details-link:hover {
    color:
        var(--text);
}


.title-row {
    display: flex;

    align-items: flex-end;

    justify-content:
        space-between;

    gap: 20px;
}


/* CARDS */

.card {
    display: block;

    background:
        var(--card);

    border:
        1px solid
        var(--card-border);

    border-radius: 15px;

    padding: 20px;
}


.card-link {
    color:
        var(--text);

    text-decoration: none;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.card-link:hover {
    background:
        var(--card-hover);

    border-color:
        #363c45;
}


.resource-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;
}


.resource-card {
    min-height: 150px;
}


.card-label {
    color:
        var(--muted);

    font-size: 14px;
}


.big-value {
    font-size: 30px;

    font-weight: 700;

    margin:
        11px 0 7px;
}


.health {
    font-size: 13px;

    font-weight: 600;
}


.small-detail {
    color:
        var(--muted);

    font-size: 12px;

    margin-top: 9px;
}


/* ESTADOS */

.healthy {
    color:
        var(--healthy);
}


.warning {
    color:
        var(--warning);
}


.critical {
    color:
        var(--critical);
}


.unknown {
    color:
        var(--unknown);
}


/* SECÇÕES */

.section-header {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;
}


.service-status {
    font-size: 19px;

    font-weight: 700;
}


.section-secondary {
    color:
        var(--muted);

    font-size: 13px;
}


.info-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;

    margin-top: 20px;
}


.info {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.info span {
    color:
        var(--muted);

    font-size: 13px;
}


.info strong {
    font-size: 15px;
}


.wide-info {
    grid-column:
        span 2;
}


.rows {
    margin-top: 15px;
}


.row {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 20px;

    border-top:
        1px solid
        var(--card-border);

    padding:
        13px 0;
}


.row:first-child {
    border-top: 0;
}


.row span {
    color:
        var(--muted);
}


.row strong {
    text-align: right;
}


.divider {
    height: 1px;

    background:
        var(--card-border);

    margin-top: 20px;
}


.cpu-model {
    font-size: 13px;
}


/* BACKUPS */

.backup-filename {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 12px;

    overflow-wrap: anywhere;
}


.check-row {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 20px;

    padding:
        13px 0;

    border-bottom:
        1px solid
        var(--card-border);
}


.check-row:first-child {
    padding-top: 0;
}


.check-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}


.check-row span {
    color:
        var(--muted);
}


.history-card {
    padding: 0;

    overflow: hidden;
}


.backup-history-row {
    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    align-items: center;

    gap: 20px;

    padding:
        13px 18px;

    border-bottom:
        1px solid
        var(--card-border);
}


.backup-history-row:last-child {
    border-bottom: 0;
}


.backup-history-date {
    font-size: 13px;
}


.backup-history-status {
    font-size: 13px;
    font-weight: 700;
}


.backup-history-size {
    text-align: right;

    color:
        var(--muted);

    font-size: 13px;
}


/* LOGS */

.log-card {
    padding: 0;

    overflow: hidden;
}


.privacy-note {
    padding:
        14px 18px;

    color:
        var(--muted);

    font-size: 12px;

    border-bottom:
        1px solid
        var(--card-border);
}


.log-list {
    width: 100%;
}


.log-entry {
    display: grid;

    grid-template-columns:
        90px 1fr;

    gap: 15px;

    padding:
        11px 18px;

    border-bottom:
        1px solid
        var(--card-border);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 12px;
}


.log-entry:last-child {
    border-bottom: 0;
}


.log-time {
    color:
        var(--muted);
}


.log-message {
    overflow-wrap:
        anywhere;
}


.error-log .log-message {
    color:
        var(--critical);
}


.empty-state {
    padding: 10px 0;

    color:
        var(--muted);

    line-height: 1.6;
}


/* FOOTER */

footer {
    text-align: center;

    color: #626973;

    font-size: 12px;

    margin-top: 35px;

    line-height: 1.8;
}


/* LOGIN */

.login-body {
    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;
}


.login-box {
    width: 100%;

    max-width: 380px;

    background:
        var(--card);

    border:
        1px solid
        var(--card-border);

    border-radius: 18px;

    padding: 32px;
}


.login-icon {
    font-size: 35px;

    margin-bottom: 12px;
}


.login-box h1 {
    font-size: 25px;
}


.login-box label {
    display: block;

    margin-top: 18px;

    margin-bottom: 7px;

    color:
        var(--muted);

    font-size: 14px;
}


.login-box input {
    width: 100%;

    padding: 13px;

    background: #0e1013;

    color: white;

    border:
        1px solid #30353d;

    border-radius: 9px;

    font-size: 16px;
}


.login-box input:focus {
    outline:
        1px solid #606874;
}


.login-button {
    width: 100%;

    margin-top: 23px;

    padding: 13px;

    border: 0;

    border-radius: 9px;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;
}


.login-error {
    color:
        var(--critical);

    margin-top: 15px;

    font-size: 14px;
}


/* TABLET */

@media (max-width: 720px) {

    .container {
        padding:
            20px 15px 40px;
    }


    .header {
        align-items:
            flex-start;
    }


    h1 {
        font-size: 24px;
    }


    .header-right {
        flex-direction:
            column;

        align-items:
            flex-end;

        gap: 8px;
    }


    .resource-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .resource-card {
        min-height: 135px;
    }


    .big-value {
        font-size: 25px;
    }


    .info-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .wide-info {
        grid-column:
            span 2;
    }


    .log-entry {
        grid-template-columns:
            70px 1fr;

        gap: 10px;

        padding:
            11px 14px;
    }


    .backup-history-row {
        grid-template-columns:
            1.4fr 1fr 0.8fr;

        gap: 10px;

        padding:
            12px 14px;
    }

}


/* TELEMÓVEL */

@media (max-width: 420px) {

    .resource-grid {
        gap: 9px;
    }


    .card {
        padding: 16px;
    }


    .row {
        align-items:
            flex-start;
    }


    .title-row {
        align-items:
            center;
    }


    .details-link {
        font-size: 12px;
    }


    .log-card,
    .history-card {
        padding: 0;
    }


    .log-entry {
        display: block;
    }


    .log-time {
        margin-bottom: 5px;
    }


    .check-row {
        align-items:
            flex-start;
    }


    .check-row strong {
        white-space: nowrap;
    }


    .backup-history-row {
        grid-template-columns:
            1fr auto;

        gap: 6px 12px;
    }


    .backup-history-date {
        grid-column: 1;
    }


    .backup-history-status {
        grid-column: 2;
        grid-row: 1;
    }


    .backup-history-size {
        grid-column: 1 / span 2;

        text-align: left;
    }

}
/* =====================================================
   HISTÓRICO / GRÁFICOS
   ===================================================== */

.period-selector {
    display: flex;
    gap: 8px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.period-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: var(--card);
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.period-button:hover {
    background: var(--card-hover);
    color: var(--text);
}

.period-button.active {
    color: var(--healthy);
    border-color: var(--healthy);
    background: var(--card-hover);
}


/* Cartão do gráfico */

.chart-card {
    padding: 20px;
    overflow: hidden;
}


/* Estatísticas acima do gráfico */

.chart-stats {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.chart-stats > div {
    background: var(--background);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 12px;
}

.chart-stats span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 5px;
}

.chart-stats strong {
    display: block;
    color: var(--text);
    font-size: 18px;
}


/* Área do gráfico */

.metric-chart {
    width: 100%;
    min-height: 260px;
    overflow: hidden;
}

.chart-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}


/* Grelha */

.chart-grid-line {
    stroke: #343a43;
    stroke-width: 1;
    stroke-dasharray: 4 5;
}


/* Linha principal do gráfico */

.chart-line {
    fill: none;
    stroke: #63d98b;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}


/* Pontos */

.chart-point {
    fill: #63d98b;
    stroke: #171a1f;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}


/* Texto dos eixos */

.chart-axis-text {
    fill: #aeb5bf;
    font-size: 12px;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* Quando não existem dados */

.chart-empty,
.empty-state {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--muted);
}


/* Link para voltar */

.back-link {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
}

.back-link:hover {
    color: var(--text);
}


/* Título da página */

.page-title {
    margin:
        4px
        0
        4px
        0;
}


/* =====================================================
   RESPONSIVO
   ===================================================== */

@media (max-width: 650px) {

    .chart-card {
        padding: 14px;
    }

    .chart-stats {
        gap: 7px;
        margin-bottom: 16px;
    }

    .chart-stats > div {
        padding: 9px;
    }

    .chart-stats span {
        font-size: 11px;
    }

    .chart-stats strong {
        font-size: 15px;
    }

    .metric-chart {
        min-height: 220px;
    }

    .chart-axis-text {
        font-size: 11px;
    }

    .period-selector {
        display: grid;
        grid-template-columns:
            repeat(3, 1fr);
    }

    .period-button {
        padding: 9px 6px;
        font-size: 12px;
    }
}