/* Hosted demonstration: the ribbon on every page, the entry page and the
   visitor register. Loaded only when CATENIX_DEMO=1. */
.cx-demo-ribbon {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 2147483000;
  block-size: 26px; display: flex; align-items: center; justify-content: center;
  background: #BA1120; color: #FFFFFF; direction: rtl;
  font: 600 13px/1 "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  letter-spacing: 0; pointer-events: none; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
}
body { padding-block-end: 26px; }
.toasts { inset-block-end: 40px !important; }
@media print {
  /* a fixed element repeats on every printed page */
  .cx-demo-ribbon { display: flex !important; inset-block-end: auto; inset-block-start: 0; position: fixed;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none; }
  body { padding-block-end: 0; padding-block-start: 26px; }
}

/* entry page */
.cx-demo-card { max-inline-size: 440px; }
.cx-demo-lead { font-size: 0.93rem; line-height: 1.7; text-align: center; margin-block-end: 14px; }
.cx-demo-small { font-size: 0.8rem; margin-block: 14px 0; text-align: center; }
.cx-demo-card .band { margin-block-end: 12px; }
.cx-demo-card .band.warning { background: rgba(180, 83, 9, 0.18); color: #FFE2C2; border: 1px solid rgba(180, 83, 9, 0.45); padding: 8px 12px; border-radius: 6px; }
.cx-demo-card .btn.primary[disabled] { opacity: 0.7; }

/* visitor register */
.cx-demo-admin { padding: 20px 20px 40px; max-inline-size: 1400px; margin: 0 auto; }
.cx-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 8px; }
.cx-table-wrap { overflow: auto; background: #FFFFFF; border: 1px solid #E3EAE6; border-radius: 10px; }
.cx-demo-admin table { inline-size: 100%; border-collapse: collapse; font-size: 0.9rem; }
.cx-demo-admin th, .cx-demo-admin td { padding: 8px 10px; border-block-end: 1px solid #E3EAE6; text-align: start; vertical-align: top; white-space: nowrap; }
.cx-demo-admin td.cx-screens { white-space: normal; min-inline-size: 240px; color: #33475B; }
.cx-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.8rem; }
.cx-tag.on { background: #E6F2F1; color: #0A6663; }
.cx-tag.off { background: #FBEAEC; color: #BA1120; }

/* the desk's side menu stops above the ribbon */
.nav { block-size: calc(100vh - 26px) !important; }
/* screens whose every call the demonstration refuses: not offered at all */
.nav a[href="#/assistant"], .nav a[href="#/knowledge"], .nav a[href="#/users"] { display: none !important; }