.status-page-content {
    max-width: 900px;
    margin: 2rem auto;
    padding: 1.5rem;
    background-color: #2a2a2a;
    border-radius: 8px;
    box-sizing: border-box; /* Ensures padding doesn't add to width */
}

#general-notice-banner {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 5px;
    text-align: center;
}
.notice-info { background-color: #3498db; color: white; }
.notice-warning { background-color: #f39c12; color: white; }
.notice-critical { background-color: #e74c3c; color: white; }

#overall-status-banner {
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 5px;
    text-align: center;
}
#overall-status-banner h2 {
    margin: 0;
    font-size: 1.8em;
}

#components-status-section h3 {
    margin-bottom: 1rem; /* Added some space below the heading */
    font-size: 1.5em;   /* Slightly adjusted default size */
}

.component-item, .sub-component-item {
    background-color: #333;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 5px solid transparent;
    flex-wrap: wrap; /* Allow wrapping if content is too wide */
    gap: 0.5rem; /* Add a small gap between flex items if they wrap */
}

.component-item > div:first-child,
.sub-component-item > div:first-child {
    flex-grow: 1; /* Allow the text content to take available space */
    margin-right: 0.5rem; /* Space between text and badge */
}

.sub-component-item {
    margin-left: 2rem;
    background-color: #3a3a3a;
}
.component-name, .sub-component-name {
    font-weight: bold;
    display: block; /* Ensure it takes full width if description is present */
    margin-bottom: 0.25em; /* Small space if description follows */
}
.status-badge {
    padding: 0.3em 0.8em;
    border-radius: 15px;
    font-size: 0.9em;
    color: white;
    white-space: nowrap; /* Prevent badge text from wrapping */
    flex-shrink: 0; /* Prevent badge from shrinking too much */
}

/* Status Colors (apply to banners, badges, borders) - UNCHANGED */
.status-operational { border-left-color: #2ecc71; background-color: rgba(46, 204, 113, 0.1); }
.status-operational .status-badge { background-color: #2ecc71; }
.overall-status-operational { background-color: #2ecc71; color: white; }

.status-degraded-performance { border-left-color: #f1c40f; background-color: rgba(241, 196, 15, 0.1); }
.status-degraded-performance .status-badge { background-color: #f1c40f; }
.overall-status-degraded-performance { background-color: #f1c40f; color: #333; }

.status-outage, .status-major-outage { border-left-color: #e74c3c; background-color: rgba(231, 76, 60, 0.1); }
.status-outage .status-badge, .status-major-outage .status-badge { background-color: #e74c3c; }
.overall-status-outage, .overall-status-major-outage { background-color: #e74c3c; color: white; }

.status-maintenance { border-left-color: #3498db; background-color: rgba(52, 152, 219, 0.1); }
.status-maintenance .status-badge { background-color: #3498db; }
.overall-status-maintenance { background-color: #3498db; color: white; }

.component-description {
    font-size: 0.9em;
    color: #ccc;
    margin-top: 0.25em; /* Reduced from 0.5em */
    line-height: 1.4; /* Improve readability */
}
.last-updated-info {
    text-align: center;
    color: #aaa;
    font-size: 0.9em;
    margin-top: 2rem;
}

/* --- OPTIMIZATIONS FOR SMALLER DISPLAYS --- */

/* Medium screens (e.g., tablets) */
@media (max-width: 768px) {
    .status-page-content {
        margin: 1.5rem 1rem; /* Reduce top/bottom and side margins */
        padding: 1rem;       /* Reduce internal padding */
    }

    #overall-status-banner h2 {
        font-size: 1.6em; /* Slightly smaller heading */
    }

    #components-status-section h3 {
        font-size: 1.3em;
    }

    .component-item, .sub-component-item {
        padding: 0.75rem;
    }

    .sub-component-item {
        margin-left: 1.5rem; /* Reduce indentation */
    }

    .component-name, .sub-component-name {
        font-size: 1em; /* Ensure readability */
    }

    .status-badge {
        font-size: 0.85em;
    }

    .component-description {
        font-size: 0.85em;
    }
}

/* Small screens (e.g., mobile phones) */
@media (max-width: 480px) {
    .status-page-content {
        margin: 1rem 0.5rem; /* Further reduce margins */
        padding: 0.75rem;     /* Further reduce padding */
        border-radius: 4px; /* Slightly smaller border radius */
    }

    #general-notice-banner {
        padding: 0.75rem;
        margin-bottom: 1rem;
        font-size: 0.9em;
    }

    #overall-status-banner {
        padding: 1rem 0.75rem;
        margin-bottom: 1.5rem;
    }

    #overall-status-banner h2 {
        font-size: 1.4em; /* Smaller heading */
    }

    #components-status-section h3 {
        font-size: 1.2em;
        margin-bottom: 0.75rem;
    }

    .component-item, .sub-component-item {
        padding: 0.6rem;
        /* If content still feels too cramped side-by-side: */
        /* flex-direction: column;
           align-items: flex-start; */
    }

    /* If stacking component items: */
    /* .component-item > div:first-child,
    .sub-component-item > div:first-child {
        margin-right: 0;
        margin-bottom: 0.5rem; 
    } */


    .sub-component-item {
        margin-left: 1rem; /* Further reduce indentation */
    }

    .component-name, .sub-component-name {
        font-size: 0.95em;
    }

    .status-badge {
        padding: 0.25em 0.7em;
        font-size: 0.8em;
    }

    .component-description {
        font-size: 0.8em;
    }

    .last-updated-info {
        font-size: 0.8em;
        margin-top: 1.5rem;
    }
}