/*
 * Almost the whole UI is drawn on one canvas, so this file is not a stylesheet for the application -
 * it is the four rules that make a canvas behave like an application window, plus the no-WebGPU
 * notice, which is the only real DOM the page has.
 *
 * Every rule here is load-bearing:
 *   100dvh, not 100vh  - vh on a phone means the viewport WITHOUT the browser chrome retracted, so
 *                        the canvas would be taller than the window and the bottom would be cut off.
 *   touch-action: none - or the browser handles a swipe as a page scroll and Webwin never sees the
 *                        pointer events that pan, scroll and drag.
 *   overflow: hidden   - the canvas is exactly the viewport; a scrollbar here would mean two
 *                        scrolling models fighting, and Webwin already scrolls its own content.
 *   display: block     - an inline canvas sits on a text baseline, which leaves a few pixels of gap
 *                        under it and makes the page scroll by that much forever.
 */
html, body {
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: #f4f6fb;
}

:root[data-theme="dark"] html,
:root[data-theme="dark"] body {
  background: #0f1216;
}

#crm {
  display: block;
  width: 100%;
  height: 100%;
  /* The canvas owns keyboard focus for the whole app, so the browser's focus ring around the
     entire viewport is noise - Webwin draws a focus ring on the control that actually has it. */
  outline: none;
}

/* ---- the no-WebGPU notice -------------------------------------------- */

#nogpu[hidden] { display: none; }

#nogpu {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  /* System stack rather than the CRM's font: this notice has to render before anything of ours
     has loaded, and it is the one screen that must never depend on the app working. */
  font: 15px/1.55 system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #1f2430;
  background: #f4f6fb;
}

.nogpu-card {
  max-width: 34rem;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid #e2e6ef;
  border-radius: 10px;
}

.nogpu-card h1 { margin: 0 0 12px; font-size: 1.3rem; }
.nogpu-card p { margin: 0 0 12px; }
.nogpu-detail { color: #6b7280; font-size: 0.9rem; }
.nogpu-detail:empty { display: none; }

:root[data-theme="dark"] #nogpu { color: #e6edf3; background: #0f1216; }
:root[data-theme="dark"] .nogpu-card { background: #171b21; border-color: #2b323b; }
:root[data-theme="dark"] .nogpu-detail { color: #9aa7b4; }