/* =================================================================
   ABL Common UI — Banner Host

   Stacked full-width banner strips for the platform notice board.
   Distinct from abl-common-ui-banner.css which styles the transient
   in-session ABLBanner toast component (different thing entirely —
   that one is short-lived JS-triggered messages; this one is the
   persistent admin-managed banner system).

   Layout: each banner is a full-width strip stacked vertically at
   the top of the dashboard main area. Severity drives the colour
   accent (left border + tinted background). Dismissible banners
   show an X button on the right.

   Severity → CSS variable mapping (matches the theme system):
     info        → --abl-accent
     warning     → --abl-warn-accent
     maintenance → --abl-warn-accent (with extra urgency icon)
     celebration → --abl-cta-accent  (festive feel)

   Works in both dark and light mode. The strip background uses a
   color-mix of the severity accent at 12% opacity over the page
   surface — visible in both themes without needing two rule sets.
   ================================================================= */

/* ── Container ── */
.abl-common-ui-banner-host {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-bottom: 16px;
}

.abl-common-ui-banner-host:empty {
    /* When there are no banners, eat zero vertical space — no bottom
       margin, no border, no nothing. Without this, every dashboard
       gets 16px of empty space at the top whether there's a banner
       or not. */
    display: none;
}

/* ── Single banner strip ── */
.abl-common-ui-banner-strip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--abl-border, #1C1D2E);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--abl-card, #13141F);
    color: var(--abl-text, #E2E8F0);
    font-size: 13px;
    line-height: 1.5;
    /* Subtle entrance animation when banners are added */
    animation: abl-banner-strip-in 200ms ease-out;
}

@keyframes abl-banner-strip-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.abl-common-ui-banner-strip__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--abl-banner-strip-accent, var(--abl-accent, #72AA16));
}

.abl-common-ui-banner-strip__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.abl-common-ui-banner-strip__body {
    flex: 1;
    min-width: 0;
}

.abl-common-ui-banner-strip__title {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--abl-heading, #F1F5F9);
}

.abl-common-ui-banner-strip__text {
    margin: 0;
    color: var(--abl-text, #CBD5E1);
}

.abl-common-ui-banner-strip__dismiss {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--abl-muted, #64748B);
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.abl-common-ui-banner-strip__dismiss:hover {
    color: var(--abl-text, #E2E8F0);
    background: var(--abl-highlight-bg, rgba(255, 255, 255, 0.04));
}

.abl-common-ui-banner-strip__dismiss svg {
    width: 14px;
    height: 14px;
}

/* ── Severity variants ──
   Each variant sets --abl-banner-strip-accent which the icon picks
   up via currentColor inheritance, plus the left border colour and
   a faint tinted background using color-mix so it works in both
   light and dark mode.

   Falling back to the existing theme accent vars means admin theme
   changes propagate to banner styling for free. */

.abl-common-ui-banner-strip--info {
    --abl-banner-strip-accent: var(--abl-accent, #72AA16);
    border-left-color: var(--abl-banner-strip-accent);
    background: color-mix(in srgb, var(--abl-banner-strip-accent) 8%, var(--abl-card, #13141F));
}

.abl-common-ui-banner-strip--warning,
.abl-common-ui-banner-strip--maintenance {
    --abl-banner-strip-accent: var(--abl-warn-accent, #f59e0b);
    border-left-color: var(--abl-banner-strip-accent);
    background: color-mix(in srgb, var(--abl-banner-strip-accent) 10%, var(--abl-card, #13141F));
}

.abl-common-ui-banner-strip--celebration {
    --abl-banner-strip-accent: var(--abl-cta-accent, #72AA16);
    border-left-color: var(--abl-banner-strip-accent);
    background: color-mix(in srgb, var(--abl-banner-strip-accent) 8%, var(--abl-card, #13141F));
}

/* ── Light mode polish ──
   color-mix(... var(--abl-card)) already adapts to light mode because
   --abl-card flips to white in light theme. The text colours and
   border opacity are already theme-aware via --abl-text and
   --abl-border. Nothing extra needed — works in both themes. */

/* ── Aurora variant for the public marketing site ──
   When the host is mounted with audience='public' (data-banner-audience
   on the container), every strip inside it inherits the aurora gradient
   styling that matches the homepage hero — teal → purple → pink, the
   "northern lights" palette. The banner sits between the white navbar
   and the gradient hero so it acts as a visual bridge instead of a
   neutral grey strip that breaks the page flow.

   Severity in this mode is communicated by the icon + title text;
   the background is the same aurora wash for every severity so the
   visual identity stays consistent across the marketing surface.
   Maintenance still gets a thicker left bar to feel more urgent.

   The aurora colours are duplicated from abl-site-hero.css here on
   purpose: the host CSS lives in common UI and must not depend on a
   product-specific stylesheet. The colours are platform brand
   constants — if they change in hero.css they should change here too. */

/* PUBLIC BANNER LAYOUT — full-bleed gradient + 1200px content
   ================================================================

   The public banner sits between the fixed navbar (64px tall, white,
   centered in a 1200px container) and the hero (full-bleed aurora
   gradient with its own 1200px content container).

   The two-layer structure:

     1. Host container (full viewport width) — owns the aurora
        gradient background. Hoisted onto the host so the gradient
        runs the entire viewport width regardless of how wide the
        screen is. Padding-top: 64px reserves the area covered by
        the fixed navbar (the navbar's opaque white background sits
        on top of the gradient invisibly).

     2. Inner strip (max-width: 1200px, centered) — contains the
        icon, title, and body text. Constrained so the content
        aligns vertically with the navbar logo above and the hero
        text below. On 1920px screens the gradient fills the full
        width but the text stays under the navbar logo where the
        eye expects to find it.

   The strip sits flush against the hero below — no margin/padding
   gap. The hero's existing padding-top: 64px is zeroed out by a
   :has() rule below when a public banner is present, so the hero
   gradient starts immediately at the bottom edge of the aurora
   strip for a continuous visual flow.

   The aurora colours match abl-site-hero.css exactly. They're
   duplicated here on purpose because common UI must not depend on
   product-specific stylesheets. Brand constants — change in both
   places if the hero gradient ever changes. */

[data-banner-audience="public"] {
    /* Host container: full-bleed aurora gradient. The 64px top
       padding reserves the navbar overlap area (the fixed navbar
       sits on top of this region with its own opaque background).
       margin-bottom: 0 so the strip butts up against the hero. */
    margin-bottom: 0;
    padding: 64px 0 0;
    background: linear-gradient(
        135deg,
        rgba(14, 217, 180, 0.55) 0%,
        rgba(123, 97, 255, 0.55) 50%,
        rgba(255, 95, 160, 0.55) 100%
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

[data-banner-audience="public"] .abl-common-ui-banner-strip {
    /* Inner content: 1200px max-width centered, transparent so the
       host's gradient shows through. Padding is tight (16px vertical)
       so the strip feels like a status ticker rather than a full
       announcement panel. */
    background: transparent;
    border: none;
    border-radius: 0;
    color: #0F172A;
    padding: 16px 24px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-shadow: none;
    gap: 14px;
    align-items: center;
    /* Monospace font family — gives the public banner a "system
       status / terminal output" feel that visually distinguishes it
       from regular page copy. Mirrors how status pages, deploy bots,
       and incident channels render announcements. */
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo,
                 Monaco, Consolas, 'Liberation Mono', 'Courier New',
                 monospace;
}

[data-banner-audience="public"] .abl-common-ui-banner-strip__icon {
    width: 22px;
    height: 22px;
    margin-top: 0;
    flex-shrink: 0;
    /* Darker variant of the aurora teal so the icon reads against
       the pastel wash. */
    color: #0E9985;
}

[data-banner-audience="public"] .abl-common-ui-banner-strip__body {
    flex: 1;
    min-width: 0;
}

[data-banner-audience="public"] .abl-common-ui-banner-strip__title {
    color: #0F172A;
    font-weight: 700;
    font-size: 13px;
    margin: 0 0 2px;
    letter-spacing: 0;
    line-height: 1.3;
    font-family: inherit;
    /* Uppercase + slight tracking matches the "system status" tone */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-banner-audience="public"] .abl-common-ui-banner-strip__text {
    color: rgba(15, 23, 42, 0.82);
    font-size: 12px;
    line-height: 1.5;
    font-family: inherit;
}

[data-banner-audience="public"] .abl-common-ui-banner-strip--maintenance .abl-common-ui-banner-strip__icon {
    /* Maintenance keeps the aurora wash but flips the icon to a
       deep pink that draws the eye — matches the hero's pink
       gradient stop. */
    color: #C2185B;
}

[data-banner-audience="public"] .abl-common-ui-banner-strip__dismiss {
    color: rgba(15, 23, 42, 0.55);
    flex-shrink: 0;
}

[data-banner-audience="public"] .abl-common-ui-banner-strip__dismiss:hover {
    color: #0F172A;
    background: rgba(15, 23, 42, 0.08);
}

/* When a public banner is present, zero out the hero's padding-top
   so the strip butts directly against the hero gradient. Without
   this the hero's existing padding-top: 64px (which exists to clear
   the fixed navbar when there's no banner) creates a dead 64px gap
   between the bottom of the banner and the start of the hero text.
   :has() targets the case "main contains a non-hidden public banner
   host" — falls back gracefully on older browsers (the gap remains
   but is not catastrophic). */
main:has([data-banner-audience="public"]:not([style*="display: none"])) .abl-site-hero-section {
    padding-top: 0;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .abl-common-ui-banner-strip {
        padding: 10px 12px;
        gap: 10px;
    }
    .abl-common-ui-banner-strip__title {
        font-size: 12px;
    }
    .abl-common-ui-banner-strip__text {
        font-size: 12px;
    }
}