/*
 * The PRACTICE banner (ER_PRACTICE=1 servers only: easiroute/practice.py adds this stylesheet, the banner and the body class to
 * every HTML page). Amber, always on top, never hides the page's own header.
 *   body.practice-on + practice-planner | practice-driver | practice-track  an app: the banner is a strip above the app
 *   body.practice-doc a printable page (delivery note, run sheet, check sheet): a strip on screen only, a faint watermark on paper
 */
:root { --practice-amber: #F5A300; --practice-ink: #2A1B00; --practice-h: 30px; }

#practice-banner {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--practice-h); padding: 4px 12px; background: var(--practice-amber); color: var(--practice-ink);
  font: 700 13px/1.25 Lato, Roboto, system-ui, sans-serif; text-align: center; letter-spacing: 0.01em;
  border-bottom: 2px solid #B97800;
}
#practice-banner .pb-tag {
  flex: none; padding: 1px 7px; border-radius: 3px; background: var(--practice-ink); color: var(--practice-amber);
  font-size: 12px; letter-spacing: 0.12em;
}
#practice-banner .pb-extra { font-weight: 500; }

/* a thin amber edge on top of everything (menus, dialogs, full-page overlays), so no screen ever loses the warning */
body.practice-on::before, body.practice-doc::before {
  content: ""; position: fixed; z-index: 2147483000; top: 0; left: 0; right: 0; height: 4px; background: var(--practice-amber);
  pointer-events: none;
}

/* ---- the office planner: body becomes a full-height column, the app takes what is left under the banner ---- */
body.practice-planner { display: flex; flex-direction: column; height: 100%; }
body.practice-planner #practice-banner { flex: none; }
body.practice-planner > #app { flex: 1 1 auto; height: auto; min-height: 0; }

/* ---- the driver app: the banner sticks to the top, the app bar sticks under it ---- */
body.practice-driver #practice-banner { position: sticky; top: 0; z-index: 2600; max-width: 480px; margin: 0 auto; }
body.practice-driver .app { min-height: calc(100dvh - var(--practice-h)); }
body.practice-driver .bar { top: var(--practice-h); }
body.practice-driver .pb-extra { display: none; }

/* ---- the public tracking page (only seen if a practice link were ever opened: none are sent) ---- */
body.practice-track #practice-banner { position: sticky; top: 0; z-index: 2600; }

@media (max-width: 640px) {
  #practice-banner { font-size: 12px; padding: 4px 8px; }
  #practice-banner .pb-extra { display: none; }
}

/* ---- printable pages ---- */
/* at the bottom on screen: these pages have their own toolbar (Print, Close) at the top */
body.practice-doc #practice-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 2147482000; pointer-events: none; border-bottom: 0; border-top: 2px solid #B97800; }
body.practice-doc::after {
  content: "PRACTICE"; position: fixed; z-index: 2147482000; left: 0; right: 0; top: 42%; text-align: center; pointer-events: none;
  font: 900 150px/1 Lato, Roboto, system-ui, sans-serif; letter-spacing: 0.08em; color: rgba(245, 163, 0, 0.16);
  transform: rotate(-24deg);
}
@media print {
  body.practice-doc #practice-banner { display: none; }
  body.practice-doc::before { display: none; }
  body.practice-doc::after { color: rgba(0, 0, 0, 0.09); }
}