/* STATUS PILL COLOURS (Production – matches new status-badge.js) */
.vr-status--green {
  background: rgba(0, 196, 179, 0.12);
  color: #00C4B3;
  border-color: rgba(0, 196, 179, 0.4);
}

.vr-status--amber {
  background: rgba(255, 184, 0, 0.12);
  color: #FFB800;
  border-color: rgba(255, 184, 0, 0.4);
}

.vr-status--red {
  background: rgba(255, 75, 92, 0.12);
  color: #FF4B5C;
  border-color: rgba(255, 75, 92, 0.4);
}


/* =========================================================
   Light theme – status pills should mirror dark theme logic:
   dark/tinted pill + light text + coloured ring (premium)
   ========================================================= */
html[data-theme="light"] .vr-status--green,
html[data-theme="light"] .vr-status--amber,
html[data-theme="light"] .vr-status--red{
  border: 1px solid transparent !important;
  color: rgba(255,255,255,0.96) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
  box-shadow: 0 10px 22px rgba(15,23,42,0.14);
}

/* Green */
html[data-theme="light"] .vr-status--green{
  background:
    linear-gradient(180deg, rgba(10,14,28,0.92), rgba(8,10,18,0.92)) padding-box,
    linear-gradient(90deg, rgba(0,196,179,0.95), rgba(108,99,255,0.75)) border-box !important;
  box-shadow:
    0 0 0 1px rgba(0,196,179,0.18),
    0 10px 22px rgba(15,23,42,0.14),
    0 10px 28px rgba(0,196,179,0.16);
}

/* Amber */
html[data-theme="light"] .vr-status--amber{
  background:
    linear-gradient(180deg, rgba(10,14,28,0.92), rgba(8,10,18,0.92)) padding-box,
    linear-gradient(90deg, rgba(255,184,0,0.95), rgba(255,75,92,0.65)) border-box !important;
  box-shadow:
    0 0 0 1px rgba(255,184,0,0.18),
    0 10px 22px rgba(15,23,42,0.14),
    0 10px 28px rgba(255,184,0,0.14);
}

/* Red */
html[data-theme="light"] .vr-status--red{
  background:
    linear-gradient(180deg, rgba(10,14,28,0.92), rgba(8,10,18,0.92)) padding-box,
    linear-gradient(90deg, rgba(255,75,92,0.95), rgba(255,184,0,0.65)) border-box !important;
  box-shadow:
    0 0 0 1px rgba(255,75,92,0.18),
    0 10px 22px rgba(15,23,42,0.14),
    0 10px 28px rgba(255,75,92,0.14);
}


/* --- Traffic-light unification --- */
/* Force 'primary' and 'info' trims into the traffic-light palette (amber) */
:root{
  --vr-status-primary-border: var(--vr-status-warning-border);
  --vr-status-primary-bg:     var(--vr-status-warning-bg);
  --vr-status-primary-fg:     var(--vr-status-warning-fg);

  --vr-status-info-border: var(--vr-status-warning-border);
  --vr-status-info-bg:     var(--vr-status-warning-bg);
  --vr-status-info-fg:     var(--vr-status-warning-fg);
}

/* Frame helpers that match pill colours (boxes/borders) */
.vr-frame--green{   border-color: var(--vr-status-success-border) !important; }
.vr-frame--amber{   border-color: var(--vr-status-warning-border) !important; }
.vr-frame--red{     border-color: var(--vr-status-danger-border) !important; }
.vr-frame--neutral{ border-color: var(--vr-status-muted-border) !important; }

/* Premium: gold halo + subtle flare sweep (Full provenance verified) */
.vr-status--premium{
  position: relative;
  box-shadow: 0 0 0 1px rgba(255,184,0,0.40), 0 0 18px rgba(255,184,0,0.22);
}
.vr-status--premium::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:999px;
  pointer-events:none;
  border:1px solid rgba(255,184,0,0.55);
  box-shadow: 0 0 22px rgba(255,184,0,0.28);
  opacity:0.9;
}

/* Camera-flare sweep */
.vr-status--premium::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width:60%;
  height:220%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.0) 35%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.0) 65%, transparent 100%);
  transform: rotate(18deg);
  filter: blur(1px);
  opacity:0.0;
  pointer-events:none;
  animation: vrPremiumFlare 3.8s ease-in-out infinite;
}

@keyframes vrPremiumFlare{
  0%{   transform: translateX(-120%) rotate(18deg); opacity:0.0; }
  18%{  opacity:0.10; }
  35%{  opacity:0.28; }
  55%{  opacity:0.12; }
  70%{  opacity:0.0; transform: translateX(260%) rotate(18deg); }
  100%{ opacity:0.0; transform: translateX(260%) rotate(18deg); }
}

/* Premium frame hint (optional) */
.vr-frame--premium::before{
  border-color: rgba(255,184,0,0.55) !important;
}