/* ==========================================================================
   ENV-BANNER.CSS — the non-production warning strip.
   --------------------------------------------------------------------------
   Author: Sharmila Parthiban.  3 Sep 2026.

   MOVED OUT OF site-enhance.css, and the move is the point of this file.

   Views/Shared/_EnvironmentBanner.cshtml is rendered by ALL THREE layouts
   (_Layout, _PrototypeLayout and the standalone Views/Portal/Index.cshtml),
   but the rules below lived in site-enhance.css, which only _Layout loads.
   Measured, not assumed: on /Account/Login the banner element was present with
   the correct DEV text and a computed background-color of rgba(0,0,0,0) — a
   line of ordinary dark text at the top of a white page, indistinguishable
   from page furniture. The warning was rendering and not warning.

   That is the worst possible failure mode for this particular component. Its
   entire job is to stop somebody believing a test screen is production, and it
   failed silently on the SIGN-IN page — the first screen anybody sees, and the
   one where an unstyled strip is least likely to be noticed as missing.

   So it is its own file, linked by every layout that renders the partial. A
   layout added later that includes the partial and forgets this <link> has the
   same bug, which is why the partial itself carries a pointer to this file.

   NOTHING HERE IS CONDITIONAL ON THE ENVIRONMENT. The decision is the
   database's: CONFIG.EnvironmentGet derives DEV/UAT/PROD from the SQL Server
   instance name (MDE-SQLDB01D / T / P) and BannerText is null for PROD, so the
   partial emits no markup at all in production and these rules match nothing.
   There is no CSS-side switch to get wrong.
   ========================================================================== */

/*  AMBER AND STRIPED. Amber because this is a caution, not an error — an error
    colour here would train people to ignore red on the screens where red means
    a rejected application. Striped because a flat amber bar sits directly above
    the flat blue Maryland gov-banner and reads as part of the site chrome; the
    diagonal hatch is not a colour anything else on the page uses, so it is
    recognisable at a glance and survives being seen a hundred times a day. */
.env-banner {
    background: #fff8e1;
    border-bottom: 2px solid #fdb81e;
    background-image: repeating-linear-gradient(135deg,
    transparent, transparent 10px,
    rgba(253, 184, 30, .18) 10px, rgba(253, 184, 30, .18) 20px);
}

.env-banner__inner {
    max-width: var(--maxw-page, 75rem);
    margin: 0 auto;
    padding: .3rem 1rem;
    display: flex;
    gap: .5rem;
    align-items: baseline;
    /*  It wraps on a phone rather than truncating: the sentence names the
        database and the server, and a truncated server name is the one detail
        that makes this banner worth reading. */
    flex-wrap: wrap;
    font-size: var(--fs-3xs, 0.8125rem);
    line-height: var(--lh-snug, 1.35);
    color: #4d3800;
}

/*  The code itself — DEV / UAT / UNKNOWN — reversed out so it reads as a stamp.
    Kept separate from the sentence so a glance picks up the tier without
    reading, while the sentence carries the detail that identifies WHICH
    non-production database this is. */
.env-banner__tag {
    flex: 0 0 auto;
    background: #1b1b1b;
    color: #fdb81e;
    font-weight: var(--fw-bold, 700);
    letter-spacing: .04em;
    padding: .05rem .4rem;
    border-radius: 2px;
}

.env-banner__text {
    font-weight: var(--fw-medium, 500);
}

.env-banner__note {
    opacity: .8;
    font-style: italic;
}

/*  UAT is the environment people mistake for production, because it holds
    realistic data and is the one they are asked to sign off. Darker so the
    distinction survives a glance.

    UNKNOWN is warmer still. An unrecognised instance suffix is the case where
    nobody can say what they are looking at, and CONFIG.fn_EnvironmentCode
    deliberately resolves it to NOT-production rather than guessing PROD — so
    this state means "the server name did not match D, T, S or P", which is
    worth investigating rather than dismissing. */
.env-banner--uat {
    background-color: #fdf3d3;
}

.env-banner--unknown {
    background-color: #fde8d3;
}

/*  FORCED COLOURS. The hatch is a background-image and the amber is an author
    colour; both are discarded, which would leave the banner as unmarked text in
    the page's own foreground colour — exactly the failure this file was created
    to fix, arriving by a different route. A border keeps it a distinct object.  */
@media (forced-colors: active) {

    .env-banner {
        border: 2px solid CanvasText;
        border-radius: 2px;
    }

    .env-banner__tag {
        border: 1px solid CanvasText;
    }
}

/*  PRINT. A printed page has no live context, so a screenshot or a printout of
    a test record must still say so — this is the one banner that must NOT be
    hidden in print, and the reason is that printed test data circulating as if
    it were a real permit is precisely the confusion the banner exists to stop.
    Flattened to ink-friendly black on white with a solid rule. */
@media print {

    .env-banner {
        background: none !important;
        background-image: none !important;
        border-bottom: 2px solid #000;
        color: #000;
    }

    .env-banner__inner {
        color: #000;
    }

    .env-banner__tag {
        background: none;
        color: #000;
        border: 1px solid #000;
    }
}

/* ==========================================================================
   MAINTENANCE BANNER (01 Oct 2026) — Views/Shared/_MaintenanceBanner.cshtml.
   Lives in this file for the same reason the environment banner does: every
   layout that renders the partial already links env-banner.css.
   EMERGENCY is red because it is: the site is down. NOTICE (planned work) is
   the federal "info" blue, so it is not confused with the amber test strip.
   Colours pass WCAG AA (text #fff on #b50909 = 7.0:1; #0b2e4f on #e7f6f8 = 12:1).
   ========================================================================== */
.maint-banner {
    border-bottom: 2px solid transparent;
}

.maint-banner__inner {
    max-width: var(--maxw-page, 75rem);
    margin: 0 auto;
    padding: .5rem 1rem;
    display: flex;
    gap: .25rem .6rem;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: var(--fs-2xs, 0.875rem);
    line-height: var(--lh-snug, 1.35);
}

.maint-banner__title {
    font-weight: 700;
}

.maint-banner--emergency {
    background: #b50909;
    border-bottom-color: #8b0a03;
    color: #fff;
}

.maint-banner--notice {
    background: #e7f6f8;
    border-bottom-color: #00bde3;
    color: #0b2e4f;
}

.maint-banner__when {
    font-style: italic;
}