/*
 * Shared styles, loaded by view/layout/meta.php on every page.
 *
 * Trimmed to what the surviving pages use. It used to carry the whole chrome of
 * the Salvation Army admin area — a fixed sidebar (#navMainBar), its nav items
 * (.topBarItem, .mainBarItem, .subBarItem), a function bar (.funcBar) and the
 * old dashboard tiles (.dashboardicon). Nothing has emitted those classes since
 * the strip-down.
 *
 * `.content` went with them, and was the one that could actually bite: a media
 * query gave it `margin-top: 113px` and `margin-left: 180px` to clear the
 * sidebar, so any stray `class="content"` would have pushed a page down and
 * across for no visible reason.
 *
 * Kept deliberately:
 *   #promptMsg   js/prompt.js shows its messages in this element
 *   .row         the vertical spacing the public form was built around, kept —
 *                but only vertically. See the rule itself.
 *   .card        used throughout view/user/registration.php
 *   .card-title  used by the debug backtrace on view/error/500.php
 *
 * A `:root` block defining --themeColor / --secondColor / --themeBorderColor
 * and a `header { background-color: var(--themeColor) }` rule used to sit where
 * the next comment is, and both were removed:
 *
 *  - `header` is a bare element selector in a file every page loads, so it
 *    painted any <header> anywhere — including pages that never asked for it,
 *    and it is what gave the dashboard bar its old dark navy. The admin chrome
 *    is now styled by class in css/admin-theme.css (.adminTopBar, .adminSidebar),
 *    which only the admin pages load.
 *  - the three variables existed only for that rule (--secondColor was already
 *    unused), and none of them were in Bootstrap's `--bs-*` namespace, so they
 *    could not have themed a Bootstrap component even if they wanted to.
 *
 * Nothing else changed: #promptMsg is the toast target js/prompt.js writes to,
 * and .card, .card-title and — especially — .row are relied on by
 * view/user/registration.php. See the note on .row below.
 */

/*
 * The toast.
 *
 * `fixed`, not `absolute`. Positioned absolutely it sat at 10% of the
 * *document*, so it was only ever on screen when the page happened to be
 * scrolled to the top — and js/prompt.js scrolled back there on every message
 * to make it visible. That is a page jump in the middle of somebody's work:
 * checking a participant in two hundred rows down threw the list back to the
 * top. Pinned to the viewport, it is wherever the eye already is and nothing
 * has to move.
 *
 * Click-through while hidden, so the empty box — 90vw wide, at 10% down — does
 * not sit over the page's own controls.
 */
#promptMsg {
   z-index: 1050;
   position: fixed;
   top: 10%;
   left: 50%;
   width: 90vw;
   margin-left: -45vw;
   height: 0;
   opacity: 0;
   pointer-events: none;
   transition: opacity 1s ease;
   -webkit-transition: opacity 1s ease;
   -moz-transition: opacity 1s ease;
   -o-transition: opacity 1s ease;
}

#promptMsg.show {
   height: auto;
   opacity: 1;
   pointer-events: auto;
}

.card{
   background-color: whitesmoke;
}

.card-title{
   padding: 10px 0px 0px 0px;
}

/*
 * Vertical spacing only.
 *
 * This was `margin: 10px 0`, a shorthand that zeroes the left and right margins
 * — which are exactly where Bootstrap puts its negative gutters. Every row on
 * every page therefore lost its gutters and pulled in 12px on each side, so the
 * registration form's inputs were 294px where they should have been 318px and
 * every column sat slightly narrower than its container.
 *
 * Naming the two longhands keeps the 10px above and below that the public form
 * was laid out against and lets the horizontal margins fall through to
 * Bootstrap's own rule.
 */
.row{
   margin-top: 10px;
   margin-bottom: 10px;
}