/* Site-wide maintenance / downtime banner (rendered below the fixed header). */
.maintenance-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 1.25rem;
    background: #fff4e5;
    border-bottom: 1px solid #f0c67c;
    color: #7a4b00;
    font-size: 0.9375rem;
    line-height: 1.4;
    /* The header is position:fixed, so a static banner would sit behind it. Stick it just
       below the header, like the impersonation bar (which sits at z-index 1045). */
    position: sticky;
    top: var(--app-header-height, 60px);
    z-index: 1044;
}

/* Clear the fixed left sidebar so the message isn't hidden behind it - use the same
   left offset the page content uses, so the banner text lines up with the content. */
body.sidebar-enabled .maintenance-banner {
    padding-left: var(--app-sidebar-content-offset, calc(var(--app-sidebar-rail-width, 72px) + 1rem));
}

.maintenance-banner__icon {
    flex: 0 0 auto;
    font-size: 1.05rem;
    color: #b7791f;
}

.maintenance-banner__body {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
    min-width: 0;
}

.maintenance-banner__message {
    font-weight: 600;
}

.maintenance-banner__countdown {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #92400e;
    white-space: nowrap;
}

.maintenance-banner__close {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: #9a6a1a;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: 0.35rem;
    line-height: 1;
    font-size: 1rem;
    transition: background-color .15s ease, color .15s ease;
}

.maintenance-banner__close:hover {
    background: rgba(154, 106, 26, 0.12);
    color: #7a4b00;
}

/* Once the countdown reaches zero, the banner shifts to a live-downtime look. */
.maintenance-banner--in-progress {
    background: #fde8e8;
    border-bottom-color: #f3b0b0;
    color: #8a1c1c;
}

.maintenance-banner--in-progress .maintenance-banner__icon {
    color: #c53030;
}

/* Dark theme */
[data-theme="dark"] .maintenance-banner {
    background: #3a2c12;
    border-bottom-color: #6b5423;
    color: #f6d79a;
}

[data-theme="dark"] .maintenance-banner__icon { color: #e6b34d; }
[data-theme="dark"] .maintenance-banner__countdown { color: #ffcf7a; }
[data-theme="dark"] .maintenance-banner__close { color: #e6b34d; }

[data-theme="dark"] .maintenance-banner--in-progress {
    background: #3a1a1a;
    border-bottom-color: #6b2b2b;
    color: #f5b5b5;
}