/* ═══════════════════════════════════════
   WATCHLIST CARD TILE
   Uses MudBlazor CSS variables injected at runtime by MudThemeProvider
═══════════════════════════════════════ */

.wlc-tile {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    position: relative;
    transition: transform var(--ij-duration-slow) var(--ij-ease-spring);
    display: block;
}

.wlc-tile:hover {
    transform: scale(1.02);
}

/* Cover image */
.wlc-tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient backgrounds (used when no cover image).
   #790: DELIBERATELY theme-invariant — these are cover art (the tile accepts a
   user CoverImageUrl; the gradient is its stand-in), and cover art does not dim
   in dark mode any more than an album cover would. Legibility on the gradient
   comes from the scrim + text-shadow, not from theming the art.
   #793: the slot a list gets is hashed from its Id in WatchListPalette.SlotFor —
   the picker dot derives from the SAME slot, so keep SlotLeadColors in that
   class in lockstep with these five definitions. */
.wlc-grad-0 { background: linear-gradient(145deg, #2997ff 0%, #a855f7 100%); }
.wlc-grad-1 { background: linear-gradient(145deg, #a855f7 0%, #ec4899 100%); }
.wlc-grad-2 { background: linear-gradient(145deg, #2dd4bf 0%, #2997ff 100%); }
.wlc-grad-3 { background: linear-gradient(145deg, #f59e0b 0%, #ec4899 100%); }
.wlc-grad-4 { background: linear-gradient(145deg, #3dcb6c 0%, #2997ff 100%); }

/* Gradient fill (absolute, behind scrim) */
.wlc-fill {
    position: absolute;
    inset: 0;
}

/* Scrim for readability of text on image/gradient */
.wlc-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, transparent 60%);
}

/* Stretched navigation link: covers the whole tile and sits above the visual
   layers so a click anywhere navigates from the static prerendered HTML, with no
   wait for the interactive circuit. */
.wlc-tile-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* #1814 — inset, because .wlc-tile clips with overflow:hidden: the global ring's
   +2px offset would be painted outside the tile and cut away. The ring lands on
   the cover art, which can be any colour (a blue cover swallowed a blue ring), so
   a white inner band makes it a two-colour indicator that reads on every cover. */
.wlc-tile-link:focus-visible {
    outline: 2px solid var(--ij-focus-ring);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px #ffffff;
}

/* Keep the 3-dot menu clickable above the stretched link. */
.wlc-tile-menu {
    position: relative;
    z-index: 3;
}

/* Bottom overlay with name, count, and menu */
.wlc-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px 4px 10px 14px;
}

.wlc-overlay-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.wlc-tile-name {
    font-size: var(--ij-ts-callout, 14px);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.wlc-tile-count {
    font-size: var(--ij-ts-caption1, 11px);
    /* #790: 0.78 washed out on the mid-gradient; 0.92 + the existing shadow
       clears AA at this size. */
    color: rgba(255, 255, 255, 0.92);
    margin-top: 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════
   WATCHLIST PAGE HEADER
═══════════════════════════════════════ */

.wlc-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.wlc-page-title {
    font-size: var(--ij-ts-large-title, 28px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary);
}

.wlc-btn-create {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--ij-primary-fill);
    color: #fff;
    border: none;
    border-radius: 980px;
    padding: 8px 16px;
    font-size: var(--ij-ts-callout, 14px);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: opacity var(--ij-duration-base) var(--ij-ease-standard);
}

.wlc-btn-create:hover {
    opacity: 0.88;
}

/* Selected tile ring */
.wlc-tile-selected {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════
   WATCHLIST DETAIL HEADER BANNER
═══════════════════════════════════════ */

.wlc-detail-header {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    height: 160px;
    margin-bottom: 20px;
}

/* #782: master→detail on phone-width viewports. The watchlist index (the
   switcher, ~1168px of gradient tiles) and the featured stock card (a desktop
   detail-pane, ~1287px) are hidden so the detail reads header → stocks instead
   of burying the list ~3 screens down. The list cell is already xs=12, so it
   fills the width once the featured cell is gone. Desktop (>900px) keeps both.
   Loaded on web (App.razor) and on the always-phone-width MAUI head
   (index.html), so the device always gets the master→detail form. */
@media (max-width: 900px) {
    .wl-detail-index,
    .wl-detail-featured {
        display: none;
    }
}

/* ═══════════════════════════════════════
   PANE ORDER (issue #1107 follow-up: rows still fixed)
═══════════════════════════════════════ */

/* The user-chosen arrangement. `order` rather than `flex-direction: row-reverse`
   because the latter also inverts justification and MudGrid's gutter behaviour.
   Scoped above 900px because below it the detail pane is display:none — there
   is only one pane to order, so the rule would be meaningless on a phone. */
@media (min-width: 901px) {
    .wl-panes-list-first .wl-detail-featured {
        order: 2;
    }
}

.wl-pane {
    position: relative;
    height: 100%;
}

/* One grip, on the detail pane: two arrangements need only one draggable
   object and one destination. Hidden below 900px, where the detail pane does
   not exist at all. It reveals on hover AND on :focus-visible — without the
   focus rule a keyboard user would tab onto a control they cannot see. */
.wl-pane-grip {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    cursor: grab;
    opacity: 0;
    transition: opacity var(--ij-duration-base) var(--ij-ease-standard);
}

@media (min-width: 901px) {
    .wl-pane-grip {
        display: flex;
    }
}

.wl-pane-detail:hover .wl-pane-grip,
.wl-pane-grip:focus-visible {
    opacity: 1;
}

.wl-pane-grip:active {
    cursor: grabbing;
}

.wl-pane-drop-target {
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: 4px;
    border-radius: 16px;
}

.wlc-detail-header-bg {
    position: absolute;
    inset: 0;
}

/* #1774: .28 -> .37. This hero's labels were never graded — #1774 listed them as
   "likely fine" on the strength of #1752's 15.76:1, but that was measured on the TILE,
   whose .wlc-scrim is a .62 bottom gradient. This hero has its own, much weaker scrim,
   and white text on it failed on the lighter cover slots: the back button 3.40:1 on g2
   (teal), the subtitle 4.21:1 even on g0.
   The scrim is the lever on purpose — per #790 legibility comes from the scrim, never
   from re-theming the cover art, so the .wlc-grad-N stops are untouched.
   .37 was the smallest uniform value that clears every label on every slot once the
   Add pill below stops painting white under its own text — but only on the model,
   which reads ~3% HIGH against the device. .39 puts the binding case (the back button
   on g2) at ~4.93:1 after correcting for that bias, so there is real margin over 4.5
   rather than the ~4.67 that .37 would have left. The model agreed with device
   pixel-sampling to within 1-3% on all four labels, before and after this change. */
.wlc-detail-header-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.39);
    backdrop-filter: blur(0px);
}

.wlc-detail-header-content {
    position: absolute;
    inset: 0;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wlc-detail-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wlc-btn-back {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #fff;
    font-size: var(--ij-ts-body, 15px);
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    /* #1774: was `opacity: 0.9`, brightening to 1 on hover. That dimmed the label at
       REST — where contrast is graded — purely to have something to change on hover,
       and there is no hover on the device heads at all. At .9 on the g2 cover it
       measured 3.40:1 against the 4.5 this 15px label needs. Full opacity at rest, and
       the hover rule that only existed to undo the dim is gone with it. */
}

.wlc-btn-add {
    display: flex;
    align-items: center;
    gap: 4px;
    /* #1774: DARK glass, not white. A white fill under white text erodes contrast by
       construction — the pill measured 4.13:1 on its interior (g0) and failed on every
       one of the five slots. Keeping it white would have needed the hero scrim at .64
       to carry it, visibly darkening the cover art; flipped to dark it clears ~7.8:1 on
       the worst slot (g2) at the scrim's .39. The .25 white border stays: it is the pill's
       edge, decoration rather than the ground the label sits on. */
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 980px;
    padding: 6px 14px;
    font-size: var(--ij-ts-subhead, 13px);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--ij-duration-base) var(--ij-ease-standard);
}

/* Hover deepens the dark glass rather than lightening it — a lighter hover would put
   back exactly the contrast loss the resting fill above was changed to remove. */
.wlc-btn-add:hover {
    background: rgba(0, 0, 0, 0.3);
}

.wlc-detail-title {
    font-size: var(--ij-ts-title1, 24px);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.wlc-detail-subtitle {
    font-size: var(--ij-ts-subhead, 13px);
    /* #1774: full white, was white@.75. The dim only carried hierarchy, and 13px
       regular under the 24px bold title already reads as secondary. At .75 it failed
       even on the darkest slot (4.21:1 on g0); keeping it would have needed the scrim
       at .50. Full white clears ~5.3:1 on the worst slot (g2) at .39. */
    color: #fff;
    margin-top: 4px;
}

/* ═══════════════════════════════════════
   STOCK SIDEBAR LIST
═══════════════════════════════════════ */

.wlc-stock-sidebar {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    overflow: hidden;
}

.wlc-stock-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: background var(--ij-duration-base) var(--ij-ease-standard);
}

.wlc-stock-row:last-child {
    border-bottom: none;
}

.wlc-stock-row:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}

.wlc-stock-row-selected {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
}

.wlc-stock-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ij-ts-callout, 14px);
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* #1774: the avatar reuses the tile's five cover-art gradients, but it is the one
   place they carry TEXT with no `.wlc-scrim` over them — the tile's legibility
   comes from that scrim, so the raw stops were never graded for white-on-fill.
   Three of the five failed: g2 1.86:1, g3 2.15:1, g4 2.11:1 against the 3:1 that
   bold text needs.
   Scoped to the avatar ON PURPOSE. The stops themselves are cover art and must
   not move: they are documented above as theme-invariant, and `SlotLeadColors`
   in WatchListPalette.SlotFor mirrors them for the picker dot. Darkening the
   shared rule would change every tile's art and silently desync that class.
   Measured on the composite (no scrim): g2 3.20, g3 3.23, g4 3.23 — a little
   over 3:1 rather than exactly on it, so a future tweak to the stops doesn't
   drop them back under without anyone noticing. */
.wlc-stock-avatar.wlc-grad-2 {
    background: linear-gradient(145deg, #00a28d 0%, #2391f9 100%);
}
.wlc-stock-avatar.wlc-grad-3 {
    background: linear-gradient(145deg, #d17a00 0%, #ec4899 100%);
}
.wlc-stock-avatar.wlc-grad-4 {
    background: linear-gradient(145deg, #17a546 0%, #2391f9 100%);
}

.wlc-stock-info {
    flex: 1;
    min-width: 0;
}

.wlc-stock-name {
    font-size: var(--ij-ts-callout, 14px);
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wlc-stock-ticker {
    font-size: var(--ij-ts-footnote, 12px);
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
}

.wlc-stock-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.wlc-stock-actions .mud-icon-button:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
}

/* ═══════════════════════════════════════
   WATCHLIST CARD SKELETON
═══════════════════════════════════════ */

.wlc-skeleton {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    position: relative;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}

.wlc-skeleton-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px 14px;
}

/* ── Shared empty state (web + device) ────────────────────────────────── */
.ij-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 48px 24px;
}

.ij-empty-state-icon {
    font-size: calc(48px * var(--ij-ts-display-scale, 1)) !important;
    color: var(--ij-text-tertiary);
    margin-bottom: 4px;
}

.ij-empty-state-title {
    font-size: var(--ij-ts-title3, 1.0625rem);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.ij-empty-state-text {
    font-size: var(--ij-ts-callout, 0.875rem);
    color: var(--mud-palette-text-secondary);
    max-width: 260px;
}

/* ── Cover patterns (#793 follow-up) ───────────────────────────────────────
   A flat two-stop gradient reads as "no cover chosen" rather than as art. These
   layer texture OVER the identity gradient, so the tile looks designed while the
   HUE still comes from WatchListPalette.SlotFor — a list keeps the same colour on
   its card, its detail header and its picker dot, which is the whole point of #793.
   The user picks the PATTERN; the palette still owns the colour.

   Pure CSS on purpose: no image assets to license, host, cache or ship, nothing
   for the server to fetch, and a few hundred bytes instead of megabytes. They
   inherit #790's theme-invariance for the same reason the gradients do — this is
   cover art, and cover art does not dim in dark mode.

   ⚠ The texture MUST go on a pseudo-element, never on background-image of the
   same element. .wlc-grad-N sets the `background` SHORTHAND, so any later
   background-image on that element REPLACES the gradient instead of stacking —
   which renders the tiles grey with no hue at all. Measured, not theorised.

   Every layer is white/black alpha only, so ONE definition works over all five
   hues instead of five variants each. */

.wlc-pat-mesh::after,
.wlc-pat-rays::after,
.wlc-pat-grid::after,
.wlc-pat-dots::after,
.wlc-pat-waves::after,
.wlc-pat-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wlc-pat-mesh::after {
    /* Light blooms only. A dark lobe was tried at two positions and read as a
       smudge at tile size either way — the depth is not worth the blemish. */
    background-image:
        radial-gradient(closest-side at 20% 26%, rgba(255, 255, 255, 0.48), transparent),
        radial-gradient(closest-side at 76% 14%, rgba(255, 255, 255, 0.30), transparent);
    background-size: 74% 74%, 58% 58%;
    background-repeat: no-repeat;
}

.wlc-pat-rays::after {
    background-image: repeating-linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.16) 0 14px,
        transparent 14px 44px
    );
}

.wlc-pat-grid::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.20) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.20) 1px, transparent 1px);
    background-size: 26px 26px, 26px 26px;
}

.wlc-pat-dots::after {
    background-image: radial-gradient(rgba(255, 255, 255, 0.34) 1.6px, transparent 1.7px);
    background-size: 16px 16px;
}

.wlc-pat-waves::after {
    background-image: repeating-radial-gradient(
        circle at 10% 118%,
        rgba(255, 255, 255, 0.18) 0 2px,
        transparent 2px 28px
    );
}

.wlc-pat-glow::after {
    background-image:
        radial-gradient(closest-side at 50% -8%, rgba(255, 255, 255, 0.62), transparent),
        radial-gradient(closest-side at 50% 118%, rgba(0, 0, 0, 0.34), transparent);
    background-size: 140% 95%, 140% 85%;
    background-repeat: no-repeat;
}

/* The picker swatch in the upsert dialog: the same art at tile aspect, small. */
.wl-cover-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 10px;
    margin: 12px 16px 0;
}

.wl-cover-choice {
    position: relative;
    aspect-ratio: 16 / 10;
    border: none;
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.wl-cover-choice[aria-pressed="true"] {
    outline-color: var(--mud-palette-primary);
}

.wl-cover-choice-art {
    position: absolute;
    inset: 0;
}