/* A REGRA @font-face para a Gotham Pro foi REMOVIDA */

:root {
    --color-bg: #000000;
    --color-surface: #161618;
    --color-border: #2a2a2a;
    --color-text-primary: #ffffff;
    --color-text-secondary: #a0a0a0;
    --font-family-pixel: 'Press Start 2P', cursive;
    /* --- MUDANÇA AQUI: Trocando para a fonte Montserrat --- */
    --font-family-sans: 'Montserrat', sans-serif;
    
    --color-up: #00e887;
    --color-partial: #ffc107;
    --color-down: #f44336;
    --color-maintenance: #2196f3;
    --color-no-data: #424242;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    font-family: var(--font-family-pixel);
    color: var(--color-text-primary);
}

.container { padding: 40px 20px; max-width: 900px; margin: 0 auto; }
.main-header { text-align: center; margin-bottom: 40px; }
.main-header img.logo { max-height: 150px; }

.main-status-summary { 
    background-color: var(--color-surface); 
    border: 1px solid var(--color-border);
    padding: 20px 25px; 
    margin-bottom: 50px; 
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
}
.main-status-summary.up { color: var(--color-up); }
.main-status-summary.partial { color: var(--color-partial); }
.main-status-summary.down { color: var(--color-down); }

.services-section .section-title {
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.service-row { 
    background-color: var(--color-surface); 
    padding: 20px; 
    border: 1px solid var(--color-border); 
    margin-bottom: 15px;
    /* Aplicando a fonte Montserrat para todo o conteúdo do card */
    font-family: var(--font-family-sans); 
}

.service-row-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
}
.service-name { font-size: 16px; font-weight: 900; text-transform: uppercase; }
.service-uptime { font-size: 14px; font-weight: 700; color: var(--color-text-secondary); }
.service-status-text { font-weight: 900; font-size: 16px; text-transform: uppercase; }
.service-status-text.up::before { content: '■ '; color: var(--color-up); }
.service-status-text.down::before { content: '■ '; color: var(--color-down); }
.service-status-text.maintenance::before { content: '■ '; color: var(--color-maintenance); }
.service-status-text.up { color: var(--color-up); }
.service-status-text.down { color: var(--color-down); }
.service-status-text.maintenance { color: var(--color-maintenance); }

.uptime-graph { display: flex; gap: 3px; height: 24px; align-items: flex-end; }
.uptime-graph .bar { flex-grow: 1; }
.uptime-graph .bar.up { background-color: var(--color-up); height: 100%; }
.uptime-graph .bar.down { background-color: var(--color-down); height: 100%; }
.uptime-graph .bar.maintenance { background-color: var(--color-maintenance); height: 100%; }
.uptime-graph .bar.no-data { background-color: var(--color-no-data); height: 100%; }

.graph-tooltip { 
    position: absolute; 
    background-color: #161618; 
    border: 1px solid var(--color-border);
    color: white; 
    padding: 8px 12px; 
    font-size: 14px; 
    text-align: center; 
    pointer-events: none; 
    z-index: 100; 
    opacity: 0; 
    transition: opacity 0.2s; 
    white-space: nowrap; 
    font-family: var(--font-family-sans); /* Usando Montserrat no tooltip também */
}
.graph-tooltip.visible { opacity: 1; }
.graph-tooltip .tooltip-date { display: block; font-size: 12px; color: var(--color-text-secondary); }
.graph-tooltip .tooltip-perc { display: block; font-weight: bold; font-size: 16px; }