/* ============================================================
   Database Operation Banner
   Fixed-position status bar below the app header.
   Respects SmartAdmin's --menu-width grid column so the
   banner never overlaps the sidebar.
   ============================================================ */

/* --- Host container ---------------------------------------- */

.database-operation-banner-host {
    display: none;
    position: fixed;
    top: var(--app-header-height, 5.5rem);
    /* Mobile: full width – sidebar is collapsed */
    left: 0;
    right: 0;
    z-index: 1040; /* above sticky header (1020), below modal (1050) */
    width: 100%;

}

.database-operation-banner-host.has-banners {
    display: block;
}

/* On desktop the CSS-grid sidebar occupies --menu-width.
   Offset the banner so it renders only in the content column. */
@media (min-width: 992px) {
    .database-operation-banner-host {
        left: var(--menu-width, 18rem);
    }

    /* Minified nav (collapsed to icon-only) */
    .set-nav-minified:not(.set-nav-collapsed) .database-operation-banner-host {
        left: var(--menu-width-minified, 4.4rem);
    }

    /* Fully-collapsed nav (sidebar off-screen) */
    .set-nav-collapsed .database-operation-banner-host {
        left: 0;
    }
}

/* Push the main content area down to clear the banner */
body.has-database-operation-banner .app-body {
    padding-top: var(--db-banner-offset, 0);
}

/* ============================================================
   Individual banner
   ============================================================ */

.database-operation-banner {
    position: relative; /* required for ::before accent stripe */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6875rem 1.25rem;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.875rem;
    line-height: 1.5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

/* Left accent stripe for visual hierarchy */
.database-operation-banner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

/* Colour tokens – kept explicit so dark-mode theme overrides
   don't bleed in and break contrast on these banners. */
.database-operation-banner.alert-info {
    background-color: #cff4fc;
    color: #055160;
}
.database-operation-banner.alert-info::before {
    background-color: #0dcaf0;
}

.database-operation-banner.alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
}
.database-operation-banner.alert-success::before {
    background-color: #198754;
}

.database-operation-banner.alert-danger {
    background-color: #f8d7da;
    color: #842029;
}
.database-operation-banner.alert-danger::before {
    background-color: #dc3545;
}

.database-operation-banner.alert-warning {
    background-color: #fff3cd;
    color: #664d03;
}
.database-operation-banner.alert-warning::before {
    background-color: #ffc107;
}

/* ============================================================
   Content layout
   ============================================================ */

.database-operation-banner .banner-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.database-operation-banner .banner-message {
    flex: 1 1 auto;
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.database-operation-banner .banner-message-text {
    display: inline;
}

.database-operation-banner .banner-progress {
    width: 100%;
    height: 0.25rem;
    overflow: hidden;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.12);
}

.database-operation-banner .banner-progress span {
    display: block;
    height: 100%;
    min-width: 0.25rem;
    border-radius: inherit;
    background-color: currentColor;
    opacity: 0.65;
    transition: width 0.2s ease;
}

/* ============================================================
   Actions row (Retry button + hint)
   ============================================================ */

.database-operation-banner .banner-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.database-operation-banner .banner-action-hint {
    font-size: 0.8125rem;
    opacity: 0.8;
    font-style: italic;
}

/* ============================================================
   Close button
   Override Bootstrap's dark-mode filter so the icon is always
   legible against the banner's light background.
   ============================================================ */

.database-operation-banner .btn-close {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 0.125rem;
    /* Neutralise Bootstrap's [data-bs-theme=dark] invert filter.
       The banner backgrounds are always light, so a dark icon
       is always correct. */
    filter: none !important;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.database-operation-banner .btn-close:hover {
    opacity: 1;
}

.database-operation-banner .btn-close:focus {
    opacity: 1;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
}

/* ============================================================
   Loading dots (in-progress animation)
   ============================================================ */

.database-operation-banner .loading-dots {
    display: inline-block;
    margin-left: 0.15rem;
    min-width: 1.25rem;
    vertical-align: baseline;
}

.database-operation-banner .loading-dots span {
    animation: db-banner-dot 1.2s infinite ease-in-out;
    opacity: 0.25;
}

.database-operation-banner .loading-dots span:nth-child(1) { animation-delay: 0s; }
.database-operation-banner .loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.database-operation-banner .loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes db-banner-dot {
    0%, 80%, 100% { opacity: 0.25; }
    40%            { opacity: 1;    }
}

/* ============================================================
   Dismiss-pending state
   Shown while the close button is waiting for the server ACK.
   ============================================================ */

.database-operation-banner .btn-close:disabled {
    opacity: 0.3;
    cursor: wait;
    pointer-events: none;
}