/* Shared styling for the VolleyPlus event-hire DEMO display pages.
   These are static example screens (sample data) shown to prospective
   hirers so they can see what our live displays look like. */

:root{
  --d-blue:#00167B;
  --d-blue-deep:#00104f;
  --d-blue-2:#0a2296;
  --d-sky:#30b6f5;
  --d-sky-soft:#7fd0fb;
  --d-orange:#f7a11a;
  --d-white:#ffffff;
  --d-line:rgba(255,255,255,.12);
  --d-panel:rgba(255,255,255,.05);
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:'Outfit',system-ui,Arial,sans-serif;
  color:#fff;
  background:radial-gradient(120% 120% at 50% 0%,#0a2296 0%,var(--d-blue) 45%,var(--d-blue-deep) 100%);
  min-height:100%;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'JetBrains Mono',monospace;}

/* Top demo bar */
.demo-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 18px;background:rgba(0,8,45,.6);border-bottom:1px solid var(--d-line);
  position:sticky;top:0;z-index:10;backdrop-filter:blur(6px);
}
.demo-bar__left{display:flex;align-items:center;gap:14px;min-width:0;}
.demo-bar a.back{
  color:#fff;text-decoration:none;font-weight:600;font-size:14px;
  border:1px solid var(--d-line);border-radius:999px;padding:7px 15px;white-space:nowrap;
  transition:background .2s;
}
.demo-bar a.back:hover{background:rgba(255,255,255,.12);}
.demo-bar__tag{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--d-sky-soft);
}
.demo-bar__tag .dot{width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulse 1.8s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55);}70%{box-shadow:0 0 0 10px rgba(74,222,128,0);}100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}}
.demo-bar img.logo{height:28px;width:auto;display:block;}

/* Caption strip under the bar */
.demo-caption{
  text-align:center;font-size:14px;color:rgba(255,255,255,.75);
  padding:12px 18px 2px;max-width:900px;margin:0 auto;
}
.demo-caption strong{color:#fff;}

/* Screen frame */
.screen-wrap{padding:22px clamp(14px,3vw,40px) 40px;}
.screen{
  max-width:1200px;margin:0 auto;background:rgba(0,10,60,.35);
  border:1px solid var(--d-line);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.screen__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 22px;border-bottom:1px solid var(--d-line);
  background:linear-gradient(90deg,rgba(48,182,245,.16),transparent);
}
.screen__title{font-size:22px;font-weight:800;letter-spacing:.02em;}
.screen__title span{color:var(--d-sky);}
.pill{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;padding:6px 13px;border-radius:999px;
  background:rgba(247,161,26,.18);border:1px solid rgba(247,161,26,.5);color:#ffcf87;
}

.badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:6px;}
.badge--sky{background:rgba(48,182,245,.2);color:var(--d-sky-soft);border:1px solid rgba(48,182,245,.4);}
.badge--orange{background:rgba(247,161,26,.2);color:#ffcf87;border:1px solid rgba(247,161,26,.45);}
.badge--green{background:rgba(74,222,128,.18);color:#8ef0b0;border:1px solid rgba(74,222,128,.4);}

.foot-note{text-align:center;color:rgba(255,255,255,.5);font-size:13px;padding:6px 18px 30px;}
.foot-note a{color:var(--d-sky);text-decoration:none;}