/* Sticky banner - always visible (neutral by default) */
#unsaved-changes-banner {
    position: fixed;
    left: var(--tz-leftbar-width, 240px);
    right: 0;
    bottom: 0;
    z-index: 1065;
    background: #f8f9fa; /* neutral */
    color: #6c757d; /* neutral text */
    border-top: 1px solid #dee2e6; /* subtle separator */
    padding: 10px 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,.05);
    transition: left 0.3s ease; /* Smooth transition when sidebar size changes */
}

/* Adjust when sidebar is hidden (no_left_margin) */
body:has(.content-page.no_left_margin) #unsaved-changes-banner {
    left: 0;
}

/* Adjust for condensed sidebar (typically 70px) */
html[data-sidenav-size="condensed"] #unsaved-changes-banner {
    left: var(--tz-leftbar-width-sm, 70px);
}

/* Adjust for full sidebar (hidden sidebar) */
html[data-sidenav-size="full"] #unsaved-changes-banner {
    left: 0;
}

/* Mobile: sidebar is always hidden */
@media (max-width: 767.98px) {
    #unsaved-changes-banner {
        left: 0;
    }
}

#unsaved-changes-banner .unsaved-banner__content {
    display: flex;
    align-items: center;
    gap: 12px;
}

#unsaved-changes-banner .unsaved-banner__icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: rgba(0,0,0,.05);
    color: #6c757d;
}

/* Dirty state: make it obvious */
#unsaved-changes-banner.is-dirty {
    background: var(--brand-orange-100); /* warning-ish */
    color: #fff;
    box-shadow: 0 -4px 16px rgba(0,0,0,.25);
}

    #unsaved-changes-banner.is-dirty .unsaved-banner__icon {
        background: rgba(255,255,255,.2);
        color: #fff;
    }

/* Title indicator when dirty */
body.unsaved-dirty-title::before {
    content: "● ";
    color: #b54708;
}

/* Save pulse when dirty */
.unsaved-pulse {
    animation: unsaved-pulse 1.5s ease-in-out infinite;
}

@keyframes unsaved-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255,193,7,.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(255,193,7,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255,193,7,0);
    }
}

/* Ensure offcanvas flyouts appear above the unsaved changes banner */
.offcanvas-backdrop {
    z-index: 1066 !important;
}

.offcanvas {
    z-index: 1070 !important;
}

/* Modals must in turn stack above the raised offcanvas layer (Bootstrap's
   defaults — backdrop 1050 / modal 1055 — sit BELOW .offcanvas at 1070,
   leaving e.g. the herd lifecycle confirm modal muted behind its own
   backdrop while the flyout stays bright). Keep backdrop < modal. */
.modal-backdrop {
    z-index: 1075 !important;
}

.modal {
    z-index: 1080 !important;
}