/* Richweb Status Page — Custom CSS */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* --- CSS Custom Properties --- */
:root {
    --bg: #0f1117;
    --card-bg: #1a1d27;
    --text-primary: #e0e0e0;
    --text-secondary: #888;
    --border: #2a2d37;
    --status-operational: #3bd671;
    --status-degraded: #f0ad4e;
    --status-down: #e74c3c;
    --status-maintenance: #5bc0de;
    --status-nodata: #2a2d37;
    --banner-operational-bg: rgba(59, 214, 113, 0.12);
    --banner-degraded-bg: rgba(240, 173, 78, 0.12);
    --banner-down-bg: rgba(231, 76, 60, 0.12);
    --banner-maintenance-bg: rgba(91, 192, 222, 0.12);
    --maint-active-bg: rgba(91, 192, 222, 0.08);
    --maint-active-border: rgba(91, 192, 222, 0.3);
    --maint-upcoming-bg: rgba(91, 192, 222, 0.04);
    --maint-upcoming-border: rgba(91, 192, 222, 0.15);
    --maint-completed-bg: rgba(136, 136, 136, 0.05);
    --maint-completed-border: rgba(136, 136, 136, 0.15);
    --tooltip-bg: #252830;
    --notice-outage-bg: rgba(231, 76, 60, 0.08);
    --notice-warning-bg: rgba(240, 173, 78, 0.08);
    --notice-info-bg: rgba(91, 192, 222, 0.08);
    --notice-resolved-bg: rgba(136, 136, 136, 0.05);
    --notice-resolved-border: rgba(136, 136, 136, 0.15);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: #f5f6f8;
        --card-bg: #ffffff;
        --text-primary: #1a1d27;
        --text-secondary: #666;
        --border: #e0e2e6;
        --status-operational: #2da44e;
        --status-degraded: #d4860a;
        --status-down: #cf222e;
        --status-maintenance: #0969da;
        --status-nodata: #d0d3d8;
        --banner-operational-bg: rgba(45, 164, 78, 0.08);
        --banner-degraded-bg: rgba(212, 134, 10, 0.08);
        --banner-down-bg: rgba(207, 34, 46, 0.08);
        --banner-maintenance-bg: rgba(9, 105, 218, 0.08);
        --maint-active-bg: rgba(9, 105, 218, 0.06);
        --maint-active-border: rgba(9, 105, 218, 0.25);
        --maint-upcoming-bg: rgba(9, 105, 218, 0.03);
        --maint-upcoming-border: rgba(9, 105, 218, 0.12);
        --maint-completed-bg: rgba(102, 102, 102, 0.04);
        --maint-completed-border: rgba(102, 102, 102, 0.12);
        --tooltip-bg: #ffffff;
        --notice-outage-bg: rgba(207, 34, 46, 0.06);
        --notice-warning-bg: rgba(212, 134, 10, 0.06);
        --notice-info-bg: rgba(9, 105, 218, 0.06);
        --notice-resolved-bg: rgba(102, 102, 102, 0.04);
        --notice-resolved-border: rgba(102, 102, 102, 0.12);
    }
}

[data-theme="light"] {
    --bg: #f5f6f8;
    --card-bg: #ffffff;
    --text-primary: #1a1d27;
    --text-secondary: #666;
    --border: #e0e2e6;
    --status-operational: #2da44e;
    --status-degraded: #d4860a;
    --status-down: #cf222e;
    --status-maintenance: #0969da;
    --status-nodata: #d0d3d8;
    --banner-operational-bg: rgba(45, 164, 78, 0.08);
    --banner-degraded-bg: rgba(212, 134, 10, 0.08);
    --banner-down-bg: rgba(207, 34, 46, 0.08);
    --banner-maintenance-bg: rgba(9, 105, 218, 0.08);
    --maint-active-bg: rgba(9, 105, 218, 0.06);
    --maint-active-border: rgba(9, 105, 218, 0.25);
    --maint-upcoming-bg: rgba(9, 105, 218, 0.03);
    --maint-upcoming-border: rgba(9, 105, 218, 0.12);
    --maint-completed-bg: rgba(102, 102, 102, 0.04);
    --maint-completed-border: rgba(102, 102, 102, 0.12);
    --tooltip-bg: #ffffff;
    --notice-outage-bg: rgba(207, 34, 46, 0.06);
    --notice-warning-bg: rgba(212, 134, 10, 0.06);
    --notice-info-bg: rgba(9, 105, 218, 0.06);
    --notice-resolved-bg: rgba(102, 102, 102, 0.04);
    --notice-resolved-border: rgba(102, 102, 102, 0.12);
}

[data-theme="dark"] {
    --bg: #0f1117;
    --card-bg: #1a1d27;
    --text-primary: #e0e0e0;
    --text-secondary: #888;
    --border: #2a2d37;
    --status-operational: #3bd671;
    --status-degraded: #f0ad4e;
    --status-down: #e74c3c;
    --status-maintenance: #5bc0de;
    --status-nodata: #2a2d37;
    --banner-operational-bg: rgba(59, 214, 113, 0.12);
    --banner-degraded-bg: rgba(240, 173, 78, 0.12);
    --banner-down-bg: rgba(231, 76, 60, 0.12);
    --banner-maintenance-bg: rgba(91, 192, 222, 0.12);
    --maint-active-bg: rgba(91, 192, 222, 0.08);
    --maint-active-border: rgba(91, 192, 222, 0.3);
    --maint-upcoming-bg: rgba(91, 192, 222, 0.04);
    --maint-upcoming-border: rgba(91, 192, 222, 0.15);
    --maint-completed-bg: rgba(136, 136, 136, 0.05);
    --maint-completed-border: rgba(136, 136, 136, 0.15);
    --tooltip-bg: #252830;
    --notice-outage-bg: rgba(231, 76, 60, 0.08);
    --notice-warning-bg: rgba(240, 173, 78, 0.08);
    --notice-info-bg: rgba(91, 192, 222, 0.08);
    --notice-resolved-bg: rgba(136, 136, 136, 0.05);
    --notice-resolved-border: rgba(136, 136, 136, 0.15);
}

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* --- Layout --- */
.container {
    max-width: 75%;
    min-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header --- */
.header {
    padding: 24px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.theme-toggle:hover {
    color: var(--text-primary);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* --- Overall Status Banner --- */
.overall-banner {
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

.overall-banner.operational {
    background: var(--banner-operational-bg);
    color: var(--status-operational);
}

.overall-banner.degraded {
    background: var(--banner-degraded-bg);
    color: var(--status-degraded);
}

.overall-banner.down {
    background: var(--banner-down-bg);
    color: var(--status-down);
}

.overall-banner.maintenance {
    background: var(--banner-maintenance-bg);
    color: var(--status-maintenance);
}

/* --- Maintenance Cards --- */
.maint-section {
    margin-bottom: 24px;
}

.maint-card {
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 10px;
    border-left: 3px solid;
}

.maint-card.active {
    background: var(--maint-active-bg);
    border-left-color: var(--status-maintenance);
}

.maint-card.upcoming {
    background: var(--maint-upcoming-bg);
    border-left-color: var(--maint-upcoming-border);
}

.maint-card.completed {
    background: var(--maint-completed-bg);
    border-left-color: var(--maint-completed-border);
    opacity: 0.7;
}

.maint-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.maint-card.active .maint-label { color: var(--status-maintenance); }
.maint-card.upcoming .maint-label { color: var(--text-secondary); }
.maint-card.completed .maint-label { color: var(--text-secondary); }

.maint-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}

.maint-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.maint-time {
    font-size: 12px;
    color: var(--text-secondary);
}

/* --- Service Groups --- */
.group {
    margin-bottom: 24px;
}

.group-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.service {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
}

.service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.service-name {
    font-size: 14px;
    font-weight: 500;
}

/* --- Status Badge --- */
.status-badge {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.status-badge.operational {
    background: rgba(59, 214, 113, 0.12);
    color: var(--status-operational);
}

.status-badge.degraded {
    background: rgba(240, 173, 78, 0.12);
    color: var(--status-degraded);
}

.status-badge.down {
    background: rgba(231, 76, 60, 0.12);
    color: var(--status-down);
}

.status-badge.maintenance {
    background: rgba(91, 192, 222, 0.12);
    color: var(--status-maintenance);
}

/* --- Timeline Bar --- */
.timeline {
    display: flex;
    gap: 1px;
    height: 20px;
    border-radius: 3px;
}

.timeline-seg {
    flex: 1;
    position: relative;
    cursor: default;
    min-width: 0;
    transition: opacity 0.15s;
}

.timeline-seg:first-child {
    border-radius: 3px 0 0 3px;
}

.timeline-seg:last-child {
    border-radius: 0 3px 3px 0;
}

.timeline-seg:hover {
    opacity: 0.75;
}

.timeline-seg.operational { background: var(--status-operational); }
.timeline-seg.degraded { background: var(--status-degraded); }
.timeline-seg.down { background: var(--status-down); }
.timeline-seg.maintenance { background: var(--status-maintenance); }
.timeline-seg.nodata { background: var(--status-nodata); }

/* Tooltip */
.timeline-seg::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--tooltip-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    visibility: hidden;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.timeline-seg:hover::after {
    visibility: visible;
}

.timeline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-secondary);
}

/* --- Footer --- */
.footer {
    text-align: center;
    padding: 24px 0 32px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .container {
        padding: 0 12px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service {
        padding: 12px;
    }

    .timeline {
        height: 16px;
    }

    .overall-banner {
        font-size: 14px;
        padding: 14px 16px;
    }

    .container {
        max-width: 100%;
        min-width: 0;
    }
}

/* --- Notice Cards --- */
.notice-section {
    margin-bottom: 24px;
}

.notice-card {
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 10px;
    border-left: 3px solid;
}

.notice-card.outage {
    background: var(--notice-outage-bg);
    border-left-color: var(--status-down);
}

.notice-card.warning {
    background: var(--notice-warning-bg);
    border-left-color: var(--status-degraded);
}

.notice-card.info {
    background: var(--notice-info-bg);
    border-left-color: var(--status-maintenance);
}

.notice-card.resolved {
    background: var(--notice-resolved-bg);
    border-left-color: var(--notice-resolved-border);
    opacity: 0.7;
}

.notice-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.notice-card.outage .notice-label { color: var(--status-down); }
.notice-card.warning .notice-label { color: var(--status-degraded); }
.notice-card.info .notice-label { color: var(--status-maintenance); }
.notice-card.resolved .notice-label { color: var(--text-secondary); }

.notice-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}

.notice-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.notice-time {
    font-size: 12px;
    color: var(--text-secondary);
}

.notice-update {
    margin-top: 8px;
    padding: 6px 0 6px 12px;
    border-left: 2px solid var(--border);
    font-size: 13px;
}

.notice-update-status {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: 6px;
}

.notice-update-msg {
    color: var(--text-primary);
}

.notice-update-time {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 8px;
}