/* Shared visuals for the trial lockdown contract.
   Keep all per-component styling in this file so a single CSS load (already
   eager-loaded from App.razor) covers TrialBanner, TrialWatermark and
   AddBillingModal across every page. Brand-indigo primary tones live in the
   single-source palette section at the top so the Phase 5 sweep can update
   them in one place. */

:root {
    /* Indigo aliases resolve to the global tokens in css/_tokens.css
       so the brand hex appears in one place. Trial banners use the
       0.10 indigo tint (slightly stronger than the auth-card 0.08)
       — both opacities are exposed as global tokens so each surface
       can pick the variant it needs without redefining either. */
    --trial-indigo: var(--gpc-indigo);
    --trial-indigo-soft: var(--gpc-indigo-soft-strong);
    --trial-indigo-line: var(--gpc-indigo-line);
    --trial-amber: #b8770a;
    --trial-amber-soft: rgba(184, 119, 10, 0.12);
    --trial-amber-line: rgba(184, 119, 10, 0.30);
    --trial-red: #b3261e;
    --trial-red-soft: rgba(179, 38, 30, 0.10);
    --trial-red-line: rgba(179, 38, 30, 0.30);
}

/* ── TrialBanner ───────────────────────────────────────────────────── */
.trial-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    margin: 12px 16px 0;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.3;
}

.trial-banner--soft {
    background: var(--trial-indigo-soft);
    border-color: var(--trial-indigo-line);
    color: var(--trial-indigo);
}

.trial-banner--hard {
    background: var(--trial-red-soft);
    border-color: var(--trial-red-line);
    color: var(--trial-red);
}

.trial-banner__icon {
    display: flex;
    align-items: center;
}

.trial-banner__copy {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.trial-banner__title {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.trial-banner__detail {
    font-size: 0.78rem;
    opacity: 0.85;
}

.trial-banner__cta {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: currentColor;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.78rem;
    text-decoration: none;
    border: none;
    flex-shrink: 0;
}

.trial-banner__cta:hover {
    opacity: 0.9;
    text-decoration: none;
}

@media (max-width: 600px) {
    .trial-banner {
        flex-wrap: wrap;
        margin: 12px 8px 0;
        padding: 8px 12px;
    }

    .trial-banner__cta {
        margin-left: auto;
    }
}

/* ── TrialWatermark ────────────────────────────────────────────────── */
.trial-watermark-host {
    position: relative;
    isolation: isolate;
}

.trial-watermark-host--tile {
    height: 100%;
    width: 100%;
}

.trial-watermark {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: inherit;
}

/* Compliance / volume tiles wrap the trial host inside `.dashboard-cell-content`,
   which sits *inside* the `.dashboard-cell-paper`'s `padding: 8px 10px 6px 10px`.
   The actual tile content (`.cell-wrapper`) breaks OUT of that padding via
   `margin: -8px -10px -2px -10px` + `width/height: calc(100% + 20/10px)` so it
   fills the card edge-to-edge. The watermark host doesn't get that treatment by
   default, so its `.trial-watermark` overlay (and the corner-to-corner gradient
   drawn on it) stays bounded by the paper's padded interior — the user sees the
   stripe ending mid-tile instead of running corner-to-corner of the visible card.
   Mirroring `.cell-wrapper`'s negative insets here pulls the overlay over the
   padding so it covers exactly the same rectangle as the underlying tile content,
   which is what the user expects from a "watermark covers the whole card" promise.
   Scoped to `.dashboard2-page .trial-watermark-host--tile` so we don't accidentally
   leak the break-out into the AccountSettings or Welcome card hosts where the
   parent layout has no padding to escape. */
.dashboard2-page .trial-watermark-host--tile .trial-watermark {
    inset: -8px -10px -2px -10px;
    /* Match .cell-wrapper's border-radius so the extended overlay's
       corners line up with the underlying card's rounded corners — without
       this the overlay paints square corners that poke past the rounded
       cell-wrapper visible underneath. */
    border-radius: 6px;
}

/* Two-layer background: the page-tint (rgba) flat colour fills the entire
   host, and the linear-gradient layered on top draws a true corner-to-corner
   diagonal stripe. `to bottom right` makes the gradient's 0%→100% axis run
   from the host's top-left to bottom-right corners regardless of the host's
   aspect ratio — solving the bug where a fixed `transform: rotate(angle)` on
   a child element could only approximate the corner diagonal for one
   specific aspect ratio (and missed the corners on every other tile). The
   stripe colour stops 47.5%↔52.5% give the strip its visual width along
   the diagonal axis (~5% of the diagonal length). */
.trial-watermark--soft {
    background:
        linear-gradient(to bottom right,
            transparent 0%,
            transparent 43%,
            rgba(228, 228, 232, 0.32) 43%,
            rgba(228, 228, 232, 0.32) 57%,
            transparent 57%,
            transparent 100%),
        rgba(252, 252, 255, 0.62);
}

/* Hard lock is interactive (clicking it pops AddBilling), so re-enable
   pointer events on the strip and make the tint slightly more opaque so
   it reads as "blocked, not just informational". Same two-layer pattern
   as the soft variant — stripe colour swapped for the red palette. */
.trial-watermark--hard {
    background:
        linear-gradient(to bottom right,
            transparent 0%,
            transparent 43%,
            rgba(238, 218, 218, 0.35) 43%,
            rgba(238, 218, 218, 0.35) 57%,
            transparent 57%,
            transparent 100%),
        rgba(252, 246, 246, 0.68);
    pointer-events: auto;
    cursor: pointer;
}

/* "TRIAL" label rides on top of the gradient stripe. It's purely a label
   now — the visual stripe itself is drawn by the parent's gradient, which
   guarantees corner-to-corner coverage. The rotation is a "good enough"
   match for typical compliance-tile aspect ratios; a small mismatch
   between the text angle and the underlying gradient angle on extreme
   aspects (very wide volume rows or very tall stacked tiles) is barely
   perceptible because the text sits dead centre over the stripe's
   midpoint. text-shadow keeps the label legible even where the stripe
   overlaps light tile content. */
.trial-watermark__strip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-22deg);
    transform-origin: center center;
    font-size: clamp(0.9rem, 2.2vw, 1.25rem);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(59, 63, 122, 0.78);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.85);
    user-select: none;
    white-space: nowrap;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.trial-watermark--hard .trial-watermark__strip {
    color: var(--trial-red);
    text-shadow: 0 0 4px rgba(255, 245, 245, 0.9);
}

/* ── AddBillingModal ──────────────────────────────────────────────── */
.add-billing-modal__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.add-billing-modal__detail {
    color: rgba(0, 0, 0, 0.62);
}