/* --- Google Fonts Import & Global Styles --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --color-ok: #22c55e;
    --color-degraded: #f97316;
    --color-down: #ef4444;
    --color-unknown: #64748b; /* Gray for unknown status */
    --color-bg: #f8fafc;
    --color-card-bg: #ffffff;
    --color-border: #e2e8f0;
    --color-text-primary: #1e293b;
    --color-text-secondary: #64748b;
}

body { font-family: 'Inter', sans-serif; background-color: var(--color-bg); color: var(--color-text-primary); margin: 0; padding: 0; }

/* --- Header & Navigation --- */
.page-header { text-align: center; padding: 2.5rem 1rem; border-bottom: 1px solid var(--color-border); }
.page-header .logo-area { text-align: center; margin-bottom: 0.5rem; }
.page-header .home-link { font-size: 0.9rem; color: var(--color-text-secondary); text-decoration: none; font-weight: 500; }
.page-header .home-link strong { font-weight: 600; }
.page-header h1 { font-size: 2.5rem; font-weight: 700; margin: 0; }
.page-header .slogan { font-size: 1.1rem; color: var(--color-text-secondary); margin: 0.5rem 0 1.5rem 0; }
.page-header nav { margin-top: 1rem; }
.page-header nav a { font-size: 0.9rem; color: var(--color-text-primary); text-decoration: none; font-weight: 500; }

/* --- Main Content Area --- */
.main-content { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }

/* --- Overall Status Banner --- */
.overall-status { padding: 1.25rem 1.5rem; border-radius: 12px; margin-bottom: 2.5rem; }
.overall-status .status-content { width: 100%; }
.overall-status .status-main { display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-size: 1.2rem; font-weight: 600; }
.overall-status .status-main i { width: 28px; height: 28px; }
.overall-status .status-notice { font-size: 0.9rem; text-align: center; margin: 0.5rem 0 0 0; opacity: 0.9; }
.overall-status.all-ok { background-color: #dcfce7; color: #166534; }
.overall-status.partial-outage { background-color: #ffedd5; color: #9a3412; }

/* --- Section Dividers --- */
.grid-separator { font-size: 1.5rem; font-weight: 600; margin-top: 3rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.75rem; }
.section-explanation { color: var(--color-text-secondary); max-width: 800px; margin: -0.5rem auto 1.5rem auto; text-align: center; }
.grid-separator:first-of-type { margin-top: 0; }

/* --- Status Grid Layout & Cards --- */
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.service-card { background-color: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); display: flex; flex-direction: column; }
.service-header { display: flex; align-items: center; gap: 0.75rem; }
.service-header h3 { font-size: 1.1rem; font-weight: 600; margin: 0; flex-grow: 1; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.service-card.ok .status-dot { background-color: var(--color-ok); }
.service-card.degraded .status-dot { background-color: var(--color-degraded); }
.service-card.down .status-dot { background-color: var(--color-down); }
.service-card.unknown .status-dot { background-color: var(--color-unknown); }
.uptime-percent { font-weight: 600; font-size: 1rem; }
.service-note { font-size: 0.875rem; color: var(--color-text-secondary); margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.chart-container { height: 80px; width: 100%; margin: 1rem 0 0.rem; }
.chart-container svg { width: 100%; height: 100%; }

/* Style for cards with no chart, but a status message */
.status-message {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-unknown);
    margin: 1rem 0;
    text-align: center;
    background-color: #f8fafc;
    border-radius: 8px;
    padding: 1rem;
}
.status-message i { width: 32px; height: 32px; margin-bottom: 0.5rem; }
.status-message span { font-weight: 500; font-size: 1.1rem; }

@media (max-width: 640px) {
    .page-header h1 { font-size: 2rem; }
    .grid-separator { font-size: 1.25rem; }
    .status-grid { grid-template-columns: 1fr; }
}
}