/**
 * Network Tasman - Outages Styles
 */

/* Unplanned Outage Banner */

/* offset top margin for mobile portrait viewport */
@media (max-width: 990px) {
    [data-unplanned-banner] {
        margin-top: 64px;
    }
}

/* Animated version (arguably less "jarring") */
[data-unplanned-banner] {
    max-height: 64px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
}
.nt-outage-alert-hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden;
}

/* Section Headers */
.nt-section {
    margin-bottom: 30px;
    width: 100%;
}

.nt-section-header {
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #ddd;
    width: 100%;
    box-sizing: border-box;
}

.nt-network-ok {
    color: #2d7a2d;
    font-weight: 500;
    padding: 10px 20px;
    background-color: #e8f5e9;
    border-left: 4px solid #4caf50;
    margin: 10px 0;
}

/* Outage Row Base - Single light grey background for all non-status rows */
.nt-outage-row {
    background-color: #fafafa !important;
    box-sizing: border-box;
}

/* Remove alternating pattern */
.nt-outage-row:nth-child(odd),
.nt-outage-row:nth-child(even) {
    background-color: #fafafa !important;
}

/* Status Badges */
.nt-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Status-specific backgrounds override the default grey */
/* Unplanned Active - Red */
.nt-badge-active-unplanned {
    color: #b80022;
    background-color: #ffe6ea;
}

.nt-active-unplanned {
    background-color: #fff5f7 !important;
    border-left: 4px solid #b80022;
}

/* Planned Active - Orange/Yellow */
.nt-badge-active-planned {
    color: #e65100;
    background-color: #fff3e0;
}

.nt-active-planned {
    background-color: #fffbf5 !important;
    border-left: 4px solid #ff9800;
}

/* Pending - Light Blue */
.nt-badge-pending {
    color: #0277bd;
    background-color: #e1f5fe;
}

.nt-pending {
    background-color: #f5fbff !important;
    border-left: 4px solid #03a9f4;
}

/* Postponed - Grey */
.nt-badge-postponed {
    color: #616161;
    background-color: #f5f5f5;
}

.nt-postponed {
    background-color: #fafafa !important;
    border-left: 4px solid #9e9e9e;
    opacity: 0.85;
}

/* Cancelled - Grey (no strikethrough) */
.nt-badge-cancelled {
    color: #616161;
    background-color: #f5f5f5;
}

.nt-cancelled {
    background-color: #fafafa !important;
    border-left: 4px solid #9e9e9e;
    opacity: 0.85;
}

/* Future outages - light grey */
.nt-future {
    background-color: #fafafa !important;
    border-left: 4px solid #e0e0e0;
}

/* Hover effects */
.nt-outage-row:hover {
    filter: brightness(0.98);
}

/* Date separator for "Later" section */
.nt-date-separator {
    font-weight: 600;
    font-size: 0.9em;
    color: #666;
    padding: 12px 20px 8px;
    margin-top: 10px;
    background-color: #e8e8e8 !important;
    border-left: 4px solid #999;
    box-sizing: border-box;
}

.nt-date-separator:first-child {
    margin-top: 0;
}

/* Accessibility improvements */
.nt-outage-header:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nt-section-header {
        font-size: 1.2em;
    }
    
    .nt-badge {
        font-size: 0.8em;
    }
}