/* Your existing CSS */
.components-container.one-column > div:nth-child(2) {
    margin-bottom: 100px;
}
.components-container.one-column > div:nth-child(1)::before {
    content: "Production";
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}
.components-container.one-column > div:nth-child(3)::before {
    content: "Sandbox";
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}
#show-updates-dropdown {
    display: none;
}
a.subscribe {
    display: none;
}

/* CUSTOMIZED MAINTENANCE SECTION */
/* Main maintenance container styling */
.scheduled-maintenances-container {
    margin-top: 40px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
/* Maintenance header - matching your green theme */
.scheduled-maintenances-container h2 {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    margin: 0;
    padding: 20px 24px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: none;
    position: relative;
}
.scheduled-maintenances-container h2::after {
    content: "";
    display: none;
}
/* Individual maintenance item */
.scheduled-maintenance {
    border-bottom: 1px solid #e9ecef;
    background: #ffffff;
    transition: background-color 0.2s ease;
}
.scheduled-maintenance:hover {
    background: #f8f9fa;
}
.scheduled-maintenance:last-child {
    border-bottom: none;
}
/* Maintenance title styling */
.scheduled-maintenance .incident-title {
    padding: 20px 24px 12px 24px;
    margin: 0;
    border-bottom: none;
    position: relative;
}
.scheduled-maintenance .incident-title a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: block;
    line-height: 1.4;
}
.scheduled-maintenance .incident-title a:hover {
    color: #4a90e2;
    text-decoration: underline;
}
/* Time display styling */
.scheduled-maintenance .incident-title .pull-right {
    float: right;
    background: #e3f2fd;
    color: #1976d2;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    margin-top: -2px;
    border: 1px solid #bbdefb;
}
/* Updates container */
.scheduled-maintenance .updates-container {
    padding: 0 24px 20px 24px;
    margin: 0;
}
.scheduled-maintenance .update {
    background: #f8f9fa;
    border-left: 4px solid #4a90e2;
    padding: 16px 20px;
    border-radius: 0 6px 6px 0;
    margin-top: 8px;
}
/* Message text styling */
.scheduled-maintenance .update .whitespace-pre-wrap {
    color: #495057;
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 12px;
    display: block;
}
/* Posted time styling */
.scheduled-maintenance .update small {
    color: #6c757d;
    font-size: 12px;
    font-style: italic;
}
/* Status indicator for maintenance type */
.scheduled-maintenance::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #4a90e2 0%, #357abd 100%);
}
.scheduled-maintenance {
    position: relative;
}
/* Empty state when no maintenance */
.scheduled-maintenances-container:empty::after {
    content: "No scheduled maintenance at this time";
    display: block;
    padding: 40px 24px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    background: #f8f9fa;
}

/* CUSTOMIZED INCIDENTS SECTION */
/* Main incidents container styling */
.incidents-list {
    margin-top: 40px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Incidents header styling */
.incidents-list h2#past-incidents {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    margin: 0;
    padding: 20px 24px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: none;
    position: relative;
}

/* STATUS DAY STYLING - Enhanced to match other sections */
.status-day {
    border-bottom: 1px solid #e9ecef;
    background: #ffffff;
    transition: background-color 0.2s ease;
    position: relative;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.status-day:last-child {
    border-bottom: none;
}

.status-day:hover {
    background: #f8f9fa;
}

/* Date header styling - Enhanced */
.status-day .date {
    background: #f8f9fa;
    padding: 16px 24px;
    font-weight: 600;
    font-size: 16px;
    color: #2c3e50;
    border-bottom: 1px solid #e9ecef;
    margin: 0;
    position: relative;
}

/* UNRESOLVED INCIDENTS STYLING */
.status-day p.color-secondary {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 6px;
    padding: 20px 24px;
    margin: 16px 24px 20px 24px;
    color: #742a2a;
    line-height: 1.6;
    font-size: 14px;
    position: relative;
    border-left: 4px solid #e53e3e;
}

.status-day p.color-secondary::before {
    content: "⚠️ Unresolved Issues";
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: #c53030;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Format the long incident text */
.status-day p.color-secondary {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Add visual separation for multiple incidents */
.status-day p.color-secondary::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #e53e3e 0%, #c53030 100%);
}

/* No incidents message styling */
.status-day.no-incidents p {
    padding: 20px 24px;
    margin: 0;
    color: #6c757d;
    font-style: italic;
    text-align: center;
    background: #f0f8f0;
    border: 1px solid #c6f6d5;
    border-radius: 6px;
    margin: 16px 24px 20px 24px;
}

.status-day.no-incidents p::before {
    content: "✅ ";
    color: #38a169;
    font-weight: 600;
}

/* Incident container */
.incident-container {
    padding: 0;
    background: #ffffff;
}

/* Incident title styling */
.incident-title {
    padding: 20px 24px 12px 24px;
    margin: 0;
    border-bottom: none;
    position: relative;
}

.incident-title a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: block;
    line-height: 1.4;
}

.incident-title a:hover {
    color: #e74c3c;
    text-decoration: underline;
}

/* Impact level indicators */
.incident-title.impact-none::before {
    content: "Minor";
    position: absolute;
    right: 24px;
    top: 20px;
    background: #28a745;
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.incident-title.impact-minor::before {
    content: "Minor";
    background: #ffc107;
    color: #212529;
}

.incident-title.impact-major::before {
    content: "Major";
    background: #fd7e14;
    color: white;
}

.incident-title.impact-critical::before {
    content: "Critical";
    background: #dc3545;
    color: white;
}

/* Updates container for incidents */
.incident-container .updates-container {
    padding: 0 24px 20px 24px;
    margin: 0;
}

.incident-container .update {
    background: #f8f9fa;
    border-left: 4px solid #e74c3c;
    padding: 16px 20px;
    border-radius: 0 6px 6px 0;
    margin-top: 8px;
    position: relative;
}

/* Status-specific styling for updates */
.update.resolved {
    border-left-color: #28a745;
}

.update.investigating {
    border-left-color: #ffc107;
}

.update.identified {
    border-left-color: #fd7e14;
}

.update.monitoring {
    border-left-color: #17a2b8;
}

/* Update status labels */
.update strong {
    color: #2c3e50;
    font-weight: 600;
}

.update.resolved strong {
    color: #28a745;
}

.update.investigating strong {
    color: #856404;
}

.update.identified strong {
    color: #bd4700;
}

.update.monitoring strong {
    color: #0c5460;
}

/* Message text styling for incidents */
.incident-container .update .whitespace-pre-wrap {
    color: #495057;
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 12px;
    display: inline;
}

/* Posted time styling for incidents */
.incident-container .update small {
    color: #6c757d;
    font-size: 12px;
    font-style: italic;
    display: block;
    margin-top: 8px;
}

/* Status indicator for incident severity */
.status-day::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #e53e3e 0%, #c53030 100%);
}

.status-day.no-incidents::before {
    background: linear-gradient(180deg, #28a745 0%, #1e7e34 100%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scheduled-maintenance .incident-title .pull-right,
    .incident-title.impact-none::before,
    .incident-title.impact-minor::before,
    .incident-title.impact-major::before,
    .incident-title.impact-critical::before {
        position: static;
        display: block;
        margin-top: 8px;
        margin-bottom: 8px;
        width: fit-content;
    }
    
    .status-day .date {
        padding: 12px 16px;
        font-size: 14px;
    }
    
    .incident-title,
    .incident-container .updates-container,
    .status-day.no-incidents p,
    .status-day p.color-secondary {
        margin-left: 16px;
        margin-right: 16px;
        padding-left: 16px;
        padding-right: 16px;
    }
}