/* Live component scenes — the product-overview panel's visual, not a backdrop.
   Markup comes from assets/ov-live.js. Everything here is decorative and text
   free, so it needs no translation; geometry uses logical properties so the whole
   workspace mirrors under html[dir="rtl"] without a second stylesheet. */

.orx-ov-live { --ovl-origin:left; --ovl-dir:1; position:absolute; z-index:0; inset:0; overflow:hidden;
  background:radial-gradient(120% 90% at 12% 0%,rgba(13,58,72,.85),rgba(4,18,25,.96) 62%); }
html[dir="rtl"] .orx-ov-live { --ovl-origin:right; --ovl-dir:-1; }
.orx-ov-live::before {
  /* faint blueprint grid so quiet corners of the workspace still read as UI */
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(119,238,225,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(119,238,225,.05) 1px,transparent 1px);
  background-size:32px 32px;
}
/* Six scenes of looping animation on a page that already carries several videos:
   idle them off screen. Named rather than `*` on purpose — pausing everything can
   catch an entrance animation at its 0% keyframe and strand the element invisible. */
.orx-ov-live.is-idle :is(.ovl-railmark,.ovl-beat,.ovl-flyer,.ovl-sweep,.ovl-scan,.ovl-chip.flip) { animation-play-state:paused; }

.ovl-app { position:absolute; inset:0; display:flex; padding:10px; gap:10px; }
.ovl-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.ovl-grow { flex:1; }

/* ── nav rail ─────────────────────────────────────────────────────────────── */
.ovl-rail {
  position:relative; flex:none; width:clamp(52px,15%,92px); display:flex; flex-direction:column; gap:8px;
  padding:10px 8px; border-radius:14px; border:1px solid rgba(119,238,225,.2);
  background:linear-gradient(180deg,rgba(11,46,58,.96),rgba(5,22,29,.96));
}
.ovl-logo { flex:none; height:22px; margin-bottom:4px; border-radius:7px;
  background:linear-gradient(120deg,rgba(119,238,225,.6),rgba(22,171,184,.3)); }
.ovl-rail i { flex:none; display:block; height:20px; border-radius:7px; border:1px solid rgba(119,238,225,.2);
  background:rgba(119,238,225,.11); animation:ovlFade .5s ease both; animation-delay:var(--d,0s); }
.ovl-raildiv { flex:none; height:1px; margin:4px 2px; background:rgba(119,238,225,.18); }
.ovl-railmark { position:absolute; inset-inline-start:2px; top:36px; width:3px; height:20px; border-radius:3px;
  background:var(--orx-cyan); box-shadow:0 0 10px 1px rgba(119,238,225,.75);
  animation:ovlRail 10s cubic-bezier(.65,0,.35,1) infinite; }
/* 28px = one 20px rail item plus the 8px gap; step 4 clears the 9px divider */
@keyframes ovlRail {
  0%,13%   { transform:translateY(0)     }
  19%,32%  { transform:translateY(28px)  }
  38%,51%  { transform:translateY(56px)  }
  57%,70%  { transform:translateY(84px)  }
  76%,93%  { transform:translateY(121px) }
  100%     { transform:translateY(0)     }
}

/* ── window chrome ────────────────────────────────────────────────────────── */
.ovl-top { flex:none; display:flex; align-items:center; gap:10px; height:36px; padding:0 12px;
  border-radius:12px; border:1px solid rgba(119,238,225,.2);
  background:linear-gradient(90deg,rgba(11,46,58,.96),rgba(5,22,29,.82)); }
.ovl-dots { display:flex; gap:5px; }
.ovl-dots b { width:7px; height:7px; border-radius:50%; background:rgba(185,212,213,.28); }
.ovl-tabs { display:flex; gap:9px; margin-inline-start:6px; }
.ovl-tabs b { width:26px; height:5px; border-radius:3px; background:rgba(185,212,213,.2); }
.ovl-tabs b.on { width:38px; background:var(--orx-cyan); box-shadow:0 0 9px -1px rgba(119,238,225,.6); }
.ovl-search { width:76px; height:14px; border-radius:999px; border:1px solid rgba(119,238,225,.18);
  background:rgba(119,238,225,.06); }
.ovl-beat { flex:none; width:7px; height:7px; border-radius:50%; background:var(--orx-cyan);
  box-shadow:0 0 9px 1px rgba(119,238,225,.75); animation:ovlBeat 1.7s ease-in-out infinite; }
@keyframes ovlBeat { 0%,100%{opacity:.35;transform:scale(.8)} 50%{opacity:1;transform:scale(1.25)} }

.ovl-stage { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; gap:10px;
  padding:12px; border-radius:14px; border:1px solid rgba(119,238,225,.18);
  background:rgba(5,23,30,.72); overflow:hidden; }

/* ── shared primitives ────────────────────────────────────────────────────── */
.ovl-b { display:block; height:6px; width:var(--w,50%); border-radius:3px; background:rgba(119,238,225,.34);
  transform-origin:var(--ovl-origin); animation:ovlGrow .5s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d,0s); }
.ovl-b.dim { background:rgba(185,212,213,.2); }
.ovl-chip { flex:none; width:22px; height:11px; border-radius:999px; background:rgba(185,212,213,.18); }
.ovl-chip.teal  { background:rgba(119,238,225,.42) }
.ovl-chip.amber { background:rgba(240,180,90,.46) }
.ovl-chip.green { background:rgba(96,214,150,.46) }
.ovl-av { flex:none; width:16px; height:16px; border-radius:50%;
  background:linear-gradient(140deg,rgba(119,238,225,.5),rgba(22,171,184,.28)); }
.ovl-act { flex:none; width:38px; height:13px; border-radius:5px; background:var(--orx-cyan); opacity:.85; }
@keyframes ovlFade { from{opacity:0} to{opacity:1} }
@keyframes ovlRise { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes ovlGrow { from{transform:scaleX(0)} to{transform:scaleX(1)} }

/* ── work cards ───────────────────────────────────────────────────────────── */
.ovl-card { display:flex; flex-direction:column; gap:7px; padding:9px; border-radius:9px;
  border:1px solid rgba(119,238,225,.18); background:rgba(11,44,55,.72);
  animation:ovlRise .55s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d,0s); }
.ovl-card.done { opacity:.5 }
.ovl-cardtop, .ovl-meta { display:flex; align-items:center; gap:7px; }
.ovl-cardtop .ovl-b, .ovl-meta .ovl-b { flex:1; }

/* ── orbit: work board ────────────────────────────────────────────────────── */
.ovl-board { position:relative; flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.ovl-kcol { display:flex; flex-direction:column; gap:7px; padding:8px 7px; border-radius:10px;
  background:rgba(119,238,225,.04); border:1px solid rgba(119,238,225,.1);
  animation:ovlFade .5s ease both; animation-delay:var(--d,0s); }
.ovl-khead { display:flex; align-items:center; gap:6px; margin-bottom:1px; }
.ovl-khead .ovl-b { flex:1; }
.ovl-flyer { position:absolute; top:36px; inset-inline-start:0; width:calc(25% - 6px); height:56px;
  border-radius:9px; border:1px solid var(--orx-cyan); background:rgba(119,238,225,.14);
  box-shadow:0 0 20px -4px rgba(119,238,225,.7); animation:ovlFly 8s cubic-bezier(.65,0,.35,1) infinite; }
/* travels needs-you -> done, then resets while invisible. --ovl-dir flips the
   travel under rtl, where the columns themselves are laid out right-to-left. */
@keyframes ovlFly {
  0%,12%   { opacity:0; transform:translateX(calc(200% * var(--ovl-dir))) }
  18%,40%  { opacity:1; transform:translateX(calc(200% * var(--ovl-dir))) }
  54%,74%  { opacity:1; transform:translateX(calc(300% * var(--ovl-dir))) }
  86%,100% { opacity:0; transform:translateX(calc(300% * var(--ovl-dir))) }
}

/* ── tables (hr directory, sales accounts) ────────────────────────────────── */
.ovl-toolbar { flex:none; display:flex; align-items:center; gap:10px; }
.ovl-seg { display:flex; gap:4px; padding:3px; border-radius:7px; background:rgba(119,238,225,.07); }
.ovl-seg b { width:24px; height:9px; border-radius:4px; background:rgba(185,212,213,.18); }
.ovl-seg b.on { background:var(--orx-cyan); opacity:.8 }
.ovl-table { flex:1; min-height:0; display:flex; flex-direction:column; }
.ovl-thead, .ovl-tr { display:grid; grid-template-columns:1.5fr 1fr .9fr .4fr; align-items:center; gap:10px; }
.ovl-thead { padding:0 8px 8px; border-bottom:1px solid rgba(119,238,225,.14); }
.ovl-tr { flex:1; min-height:0; padding:0 8px; border-bottom:1px solid rgba(119,238,225,.07);
  animation:ovlRise .5s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d,0s); }
.ovl-tc { display:flex; align-items:center; gap:8px; min-width:0; }
.ovl-tc.lead .ovl-b { flex:1 }
.ovl-tc.end { justify-content:flex-end; }

/* ── time off / expenses: two panes ───────────────────────────────────────── */
.ovl-split { flex:1; min-height:0; display:grid; grid-template-columns:.9fr 1.1fr; gap:10px; }
.ovl-pane { display:flex; flex-direction:column; gap:8px; min-height:0; }
.ovl-pane.wide { padding:9px; border-radius:10px; border:1px solid rgba(119,238,225,.14);
  background:rgba(119,238,225,.04); }
.ovl-calhead { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; padding-bottom:7px; }
.ovl-calhead .ovl-b { height:4px }
.ovl-cal { flex:1; min-height:0; display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:1fr; gap:5px; }
.ovl-cell { border-radius:5px; border:1px solid rgba(119,238,225,.14); background:rgba(119,238,225,.05);
  animation:ovlFade .4s ease both; animation-delay:var(--d,0s); }
.ovl-cell.on { border-color:rgba(119,238,225,.65); background:rgba(119,238,225,.26);
  box-shadow:0 0 12px -3px rgba(119,238,225,.6); }
.ovl-approve { flex:none; display:flex; align-items:center; gap:8px; padding-top:9px;
  border-top:1px solid rgba(119,238,225,.14); }
.ovl-chip.flip { animation:ovlFlip 5.5s ease-in-out infinite; }
@keyframes ovlFlip {
  0%,32%   { background:rgba(240,180,90,.46); width:22px }
  44%,88%  { background:rgba(96,214,150,.5);  width:32px }
  100%     { background:rgba(240,180,90,.46); width:22px }
}

/* ── kpi row ──────────────────────────────────────────────────────────────── */
.ovl-kpis { flex:none; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.ovl-kpi { display:flex; flex-direction:column; gap:7px; padding:9px; border-radius:9px;
  border:1px solid rgba(119,238,225,.16); background:rgba(11,44,55,.6);
  animation:ovlRise .5s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d,0s); }
.ovl-num { height:11px; width:64%; border-radius:4px;
  background:linear-gradient(90deg,rgba(119,238,225,.75),rgba(119,238,225,.4)); }
.ovl-trend { width:18px; height:5px; border-radius:3px; background:rgba(96,214,150,.6); }
.ovl-trend.down { background:rgba(240,140,120,.6); }

/* ── charts ───────────────────────────────────────────────────────────────── */
.ovl-chart { position:relative; flex:1; min-height:0; display:flex; align-items:flex-end; gap:6px; }
.ovl-chart.flat { position:absolute; inset:0; opacity:.45; }
.ovl-barv { flex:1; height:var(--h,50%); border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,rgba(119,238,225,.55),rgba(22,171,184,.14));
  transform-origin:bottom; animation:ovlBarUp .7s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d,0s); }
@keyframes ovlBarUp { from{transform:scaleY(0)} to{transform:scaleY(1)} }
/* the sweep/scan lines are full-size elements painting a 2px edge, so a 100%
   translate carries the line exactly across the box whatever its pixel size */
.ovl-sweep { position:absolute; top:0; bottom:0; left:0; width:100%; pointer-events:none;
  background:linear-gradient(90deg,var(--orx-cyan) 0 2px,transparent 2px);
  filter:drop-shadow(0 0 9px rgba(119,238,225,.6)); animation:ovlSweep 6.5s ease-in-out infinite; }
@keyframes ovlSweep { 0%{opacity:0;transform:translateX(0)} 8%{opacity:1} 86%{opacity:1} 100%{opacity:0;transform:translateX(100%)} }
.ovl-chips { flex:none; display:flex; gap:8px; }
.ovl-pillbtn { flex:1; height:16px; border-radius:999px; border:1px solid rgba(119,238,225,.24);
  background:rgba(119,238,225,.09); animation:ovlRise .5s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d,0s); }

/* ── expenses: document scan ──────────────────────────────────────────────── */
.ovl-doc { position:relative; display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding:14px; border-radius:10px; border:1px solid rgba(119,238,225,.2);
  background:linear-gradient(160deg,rgba(14,52,64,.8),rgba(6,26,34,.8)); overflow:hidden; }
.ovl-doc .ovl-b { background:rgba(185,212,213,.24); }
.ovl-rule { height:1px; background:rgba(185,212,213,.22); }
.ovl-scan { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,var(--orx-cyan) 0 2px,transparent 2px);
  filter:drop-shadow(0 0 12px rgba(119,238,225,.55)); animation:ovlScan 4.8s ease-in-out infinite; }
@keyframes ovlScan { 0%{opacity:0;transform:translateY(0)} 10%{opacity:1} 80%{opacity:1} 100%{opacity:0;transform:translateY(100%)} }
.ovl-fieldhead { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-bottom:8px; border-bottom:1px solid rgba(119,238,225,.14); }
.ovl-field { display:flex; flex-direction:column; gap:5px;
  animation:ovlRise .45s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d,0s); }
.ovl-input { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:6px;
  border:1px solid rgba(119,238,225,.24); background:rgba(119,238,225,.07); }
.ovl-input .ovl-b { flex:1 }
.ovl-tick { flex:none; width:7px; height:7px; border-radius:50%; background:rgba(96,214,150,.85);
  box-shadow:0 0 8px rgba(96,214,150,.6); }

/* ── sales: revenue line ──────────────────────────────────────────────────── */
.ovl-graph { position:relative; flex:1; min-height:0; }
.ovl-line { position:absolute; inset:0; z-index:1; width:100%; height:100%; }
.ovl-stroke { stroke:var(--orx-cyan); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(119,238,225,.6)); stroke-dasharray:520; stroke-dashoffset:520;
  animation:ovlDraw 2.6s cubic-bezier(.4,0,.2,1) .4s forwards; }
.ovl-area { opacity:0; animation:ovlFade 1s ease 1.7s forwards; }
@keyframes ovlDraw { to { stroke-dashoffset:0 } }

/* Below the tablet breakpoint the panel stacks and the visual gets short and
   wide; drop the rail and the densest scenes rather than squeezing them. */
@media (max-width:900px) {
  .ovl-rail { display:none }
  .ovl-board { grid-template-columns:repeat(3,1fr) }
  .ovl-board .ovl-kcol:nth-child(4) { display:none }
  .ovl-split { grid-template-columns:1fr }
  .ovl-split .ovl-pane:not(.wide) { display:none }
  .ovl-kpis { grid-template-columns:repeat(2,1fr) }
  .ovl-thead, .ovl-tr { grid-template-columns:1.5fr 1fr .4fr }
  .ovl-tc:nth-child(3) { display:none }
}
@media (max-width:560px) {
  .ovl-top { height:28px }
  .ovl-board { grid-template-columns:repeat(2,1fr) }
  .ovl-board .ovl-kcol:nth-child(3) { display:none }
  .ovl-tabs, .ovl-search { display:none }
}

@media (prefers-reduced-motion:reduce) {
  .orx-ov-live *, .orx-ov-live *::before { animation:none !important; }
  .ovl-stroke { stroke-dashoffset:0 }
  .ovl-area { opacity:1 }
  .ovl-sweep, .ovl-scan, .ovl-flyer { display:none }
}