/* ──────────────────────────────────────────────────────────────────────────
   Demo sandbox banner.
   Shown ONLY when IDemoResetSchedule.IsDemo == true. Rendered above the
   Radzen header so it never overlaps with notifications or the impersonation
   bar. Layout cooperates by adding top padding equal to the banner height.
   ────────────────────────────────────────────────────────────────────────── */

.demo-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    z-index: 1300; /* above RadzenHeader (default 1024) and impersonation bar */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 12px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    color: #78350f;
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    border-bottom: 1px solid #f59e0b;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.15);
    -webkit-user-select: none;
    user-select: none;
}

.demo-banner .demo-banner-icon {
    font-size: 14px;
}

.demo-banner time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Push the layout down so the fixed banner does not overlap the header.
   The MainLayout's RadzenLayout uses position:absolute internally — we
   add a body-level class that shifts the layout origin. */
body.has-demo-banner .rz-layout,
body.has-demo-banner .rz-header {
    top: 28px;
}

body.has-demo-banner .impersonation-bar {
    top: 28px;
}