/*
 * The training copy's banner.
 *
 * HAND-WRITTEN, NOT PART OF THE TAILWIND BUILD. `app.css` is generated
 * from assets/input.css by `npm run build:css` and committed; this file
 * is not, so the banner cannot vanish because somebody rebuilt the
 * stylesheet without Node, and the live portal never requests it at all.
 * base.html links it only when settings.TRAINING is on.
 *
 * MAGENTA, AND THE COLOUR IS A DECISION. The live palette is indigo
 * (#302F8E), blue (#3d74a7), red (#b91c1c), amber (#b45309), green
 * (#15803d) and greys -- checked against tailwind.config.js and the built
 * sheet, not guessed. Magenta appears nowhere in it, so this band cannot
 * be mistaken for part of the real interface.
 *
 * It is also the only one of the unused hues that carries no meaning
 * here: red already means an error, amber a warning and green an
 * everything-is-fine. A training banner in any of those would be read as
 * a message about the data rather than about the portal.
 */

:root {
  --training: #a21caf;
}

.training-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;              /* above the topbar (40) and the sidebar (30) */
  background: var(--training);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.6667rem;
  height: 1.6667rem;
  text-align: center;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 .5rem;
}

/*
 * EVERYTHING FIXED MOVES DOWN BY THE BANNER'S HEIGHT.
 *
 * The topbar and sidebar are `position: fixed` with `top: 0` and
 * `top: navbar`, so without this the banner would sit on top of the top
 * bar and hide the logout button -- a banner that covers a control is a
 * worse fault than no banner. The numbers mirror the Tailwind spacing
 * tokens `navbar` (4.4167rem) and the banner height above.
 */
.is-training .topbar {
  top: 1.6667rem;
}

.is-training .sidebar {
  top: 6.0834rem;           /* 1.6667 banner + 4.4167 navbar */
}

.is-training .appmain {
  padding-top: 6.0834rem;
}

@media (max-width: 767px) {
  /* The phone layout drops the sidebar offset but keeps the banner. */
  .is-training .navdrop {
    top: 6.0834rem;
  }
}

/*
 * PRINTING A SCREEN is not the same as issuing a document -- the PDFs
 * carry their own watermark -- but a browser print of a training page
 * must not come out looking like the real thing either.
 */
@media print {
  .training-banner {
    position: static;
    background: var(--training) !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}