/*
 * brand.css — Border Intelligence Gate Application
 * Single source of truth for brand imagery.
 *
 * Consumed by:
 *   • MAUI BlazorWebView  →  index.html links _content/BorderIntelligence.GateApp.Razor/css/brand.css
 *   • Any web host        →  same path via Blazor static-web-assets middleware
 *
 * Image paths are relative to THIS CSS file inside the RCL wwwroot.
 * Blazor rewrites _content/… URLs automatically for both targets.
 */

/* ─────────────────────────────────────────────────────────────────
   WATERMARK  — Police Camerounaise badge tiled across the full app
   ───────────────────────────────────────────────────────────────── */

/*
 * The .bi-watermark div is rendered by <Watermark /> (Shared/Watermark.razor).
 * It is placed once at the root (Routes.razor) so it underlies the entire app,
 * including the login page, matching the React pattern:
 *
 *   body { backgroundImage: url(watermark), backgroundRepeat: repeat }
 *   body::before { opacity: 0.90 overlay }
 *
 * Here we use a fixed z-index:-1 layer instead of body::before so it does not
 * interfere with Blazor's component rendering z-stack.
 */
.bi-watermark {
    position: fixed;
    inset: 0;                          /* top/right/bottom/left = 0 */
    background-image: url('../images/watermark.png');
    background-repeat: repeat;
    background-size: 180px auto;       /* tile size — adjust to taste */
    opacity: 0.07;                     /* subtle: 7% visibility        */
    pointer-events: none;              /* never blocks clicks/touches  */
    user-select: none;
    z-index: -1;                       /* behind all page content      */
}

/* ─────────────────────────────────────────────────────────────────
   LOGIN BRAND PANEL — ensure watermark shows through the gradient
   ───────────────────────────────────────────────────────────────── */

/*
 * The login wrapper background is kept as a semi-transparent gradient
 * so the watermark underneath is still slightly visible.
 */
.login-wrapper {
    background: linear-gradient(
        135deg,
        rgba(245, 247, 250, 0.97) 0%,
        rgba(195, 207, 226, 0.97) 100%
    );
}

/* ─────────────────────────────────────────────────────────────────
   BRAND ICON — replaces bi-shield-lock-fill on the left panel
   ───────────────────────────────────────────────────────────────── */

.brand-flag-img {
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    display: block;
}