/* ===== BFM V6 dashboard fixes — dropdowns, seg slider, remote-control grid ===== */

/* ---------------------------------------------------------------------------
   1) DROPDOWN STACKING + READABILITY
   The card header sits ABOVE the chart/donut (which are later DOM siblings and
   were painting over the open menu — that's why the graph "showed through" the
   dropdown). Lift the header into its own higher stacking context.
--------------------------------------------------------------------------- */
.dash5-card .card-head{ position:relative; z-index:6 }
.dash5-card .chart2d-wrap, .dash5-card .chart2d-labels,
.dash5-card .share-row, .dash5-card .donut-stage{ position:relative; z-index:1 }
.dd.open{ z-index:50 }

/* Menu: hidden by default via VISIBILITY (absolute, so no stray "bar" left
   rendered) and animates on BOTH open and close. Fully opaque so nothing
   behind it shows through. */
.dd-menu, .acct-menu{
  display:grid !important; visibility:hidden; opacity:0; transform:translateY(-7px) scale(.97);
  transform-origin:top right; pointer-events:none; animation:none !important; z-index:60 !important;
  background:#0c0a05 !important; border:1px solid rgba(255,211,106,.20) !important;
  box-shadow:0 28px 70px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,211,106,.06) !important;
  padding:6px !important;
  transition:opacity .15s ease, transform .2s cubic-bezier(.2,.8,.2,1), visibility .2s;
}
.dd.open .dd-menu, .acct-pick.open .acct-menu{ visibility:visible; opacity:1; transform:none; pointer-events:auto }

/* Bigger, clearer hit targets + a hover state you can actually see. */
.dd-opt, .acct-opt{
  padding:10px 13px !important; border-radius:8px; font-size:12.5px; line-height:1;
  transition:background .13s ease, color .13s ease, padding-left .13s ease;
}
.dd-opt:hover, .dd-opt:focus-visible,
.acct-opt:hover, .acct-opt:focus-visible{
  background:rgba(255,211,106,.16) !important; color:var(--g1) !important; padding-left:16px !important; outline:none;
}
.dd-opt.on, .acct-opt.on, .dd-opt[aria-selected="true"]{
  color:var(--g1) !important; background:rgba(255,211,106,.10) !important;
}
/* gold tick on the active row so the current choice is obvious */
.dd-opt.on::after, .acct-opt.on::after{ content:"✓"; float:right; color:var(--g2); font-size:11px; opacity:.9 }

/* the chart scrubber must not poke through an open dropdown */
body.dd-open #perfScrub{ opacity:0 !important; visibility:hidden }

/* ---------------------------------------------------------------------------
   2) PROFIT / PLAYTIME — sliding pill (like the top nav indicator)
--------------------------------------------------------------------------- */
.dash5 .seg{ position:relative; overflow:hidden }
.dash5 .seg .seg-ind{
  position:absolute; top:0; left:0; z-index:0; pointer-events:none; border-radius:7px;
  background:rgba(255,211,106,.15); box-shadow:inset 0 0 0 1px rgba(255,211,106,.32), 0 2px 10px rgba(255,211,106,.12);
  transition:transform .36s cubic-bezier(.55,1.25,.4,1), width .36s cubic-bezier(.55,1.25,.4,1), height .2s ease;
}
.dash5 .seg button{ position:relative; z-index:1; background:transparent !important; border-right:0 !important; transition:color .2s ease }
.dash5 .seg button.on{ background:transparent !important; color:var(--g1) }

/* ---------------------------------------------------------------------------
   3) REMOTE CONTROL — a full-bleed TIGHT grid of squares (no gaps, single
      shared lines). Squares extrude toward the viewer PASSIVELY (ambient wave,
      no mouse-driven movement / no tilt). On hover, the grid LINES near the
      cursor glow gold.
--------------------------------------------------------------------------- */
.remote-screen .scan{ display:none !important }
.remote-screen{ perspective:1200px; perspective-origin:50% 40%; overflow:hidden }

/* tight grid, fills the screen, faces us (no tilt). rows + cell size set by JS. */
.remote-screen .rg{
  position:absolute; inset:0; display:grid; gap:0;
  grid-template-columns:repeat(26,1fr);
  pointer-events:none; transform-style:preserve-3d;
  border-top:1px solid rgba(255,211,106,.13); border-left:1px solid rgba(255,211,106,.13);
}
/* each tile shares its right/bottom edge with the neighbour = one continuous line,
   no spacing. Passive ambient extrude (delay per-tile in JS, set off mouse). */
.remote-screen .rg i{
  border-right:1px solid rgba(255,211,106,.13);
  border-bottom:1px solid rgba(255,211,106,.13);
  background:#0b0905; transform-style:preserve-3d; will-change:transform;
  animation:rgPop 4.2s ease-in-out infinite both;
}
@keyframes rgPop{ 0%,100%{ transform:translateZ(0) } 50%{ transform:translateZ(15px) } }
/* hover line-glow: a flat gold line-grid (matching cell size --cw/--ch) masked to
   a soft circle at the cursor, sitting above the tiles so the lines stay crisp. */
.remote-screen .gridglow{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease; z-index:2;
  background:
    repeating-linear-gradient(90deg, rgba(255,209,98,.95) 0 1.4px, transparent 1.4px var(--cw,42px)),
    repeating-linear-gradient(0deg,  rgba(255,209,98,.95) 0 1.4px, transparent 1.4px var(--ch,42px));
  -webkit-mask:radial-gradient(circle 160px at var(--mx,50%) var(--my,50%), #000 0%, rgba(0,0,0,.55) 42%, transparent 72%);
          mask:radial-gradient(circle 160px at var(--mx,50%) var(--my,50%), #000 0%, rgba(0,0,0,.55) 42%, transparent 72%);
}
.remote-screen.hot .gridglow{ opacity:1 }
/* when the (preview) mod connects the field gets livelier + the label fades */
.remote-screen.live .rg i{ animation-duration:2.6s }
.remote-screen.live .gridglow{ opacity:.32 }
.remote-screen > span:not(.rg){ position:relative; z-index:3; text-shadow:0 2px 12px #000, 0 0 22px rgba(0,0,0,.6); transition:opacity .3s }
.remote-screen.live > span:not(.rg){ opacity:0; pointer-events:none }

/* ---------------------------------------------------------------------------
   4) REMOTE buttons + status pill — enabled, with hover/press feedback
--------------------------------------------------------------------------- */
.dash5 .remote-actions button, .dash5 .remote-mode button{ transition:all .15s ease }
.dash5 .remote-actions button:not(:disabled), .dash5 .remote-mode button:not(:disabled){ cursor:pointer }
.dash5 .remote-actions button:not(:disabled):hover, .dash5 .remote-mode button:not(:disabled):hover{
  border-color:rgba(255,211,106,.5); color:var(--g1); background:rgba(255,211,106,.09)
}
.dash5 .remote-actions button:not(:disabled):active, .dash5 .remote-mode button:not(:disabled):active{ transform:translateY(1px) scale(.985) }
.dash5 .remote-actions button[disabled], .dash5 .remote-mode button[disabled], .remote-mode select[disabled]{ opacity:.4; cursor:not-allowed }
.dash5 .remote-actions button.armed{ border-color:rgba(120,230,140,.55); color:#bdf0c4; background:rgba(120,230,140,.1) }

.remote-card .pill.preview{ color:#ffe08c; border-color:rgba(255,211,106,.45) }
.remote-card .pill.preview .off, .remote-card .pill.preview .dot{ background:#ffd36a; box-shadow:0 0 10px #ffd36a }

@media(prefers-reduced-motion:reduce){
  .remote-screen .rg i{ animation:none }
  .dash5 .seg .seg-ind{ transition:none }
}