@import 'ag-grid-community/styles/ag-grid.css';
@import 'ag-grid-community/styles/ag-theme-alpine.css';

/* App background. Provided as a CSS custom property by src/colors.js
   (installCssVars), with a hard-coded fallback for the very first paint. */
html,
body,
#root {
  min-height: 100%;
  background-color: var(--df-main-background, #82b8b4);
}

html,
body {
  overscroll-behavior-y: none;
  touch-action: manipulation;
}


/* ────────────────────────────────────────────────────────────────────────────
 * SYSTEM-WIDE SPELLCHECK OFF
 *
 * dashfront is a German ERP/POS for article numbers, EANs, SKUs and quantities.
 * None of that vocabulary exists in any dictionary, so a spellchecker only ever
 * paints red squiggles and slows typing. Every editable surface must therefore
 * opt out — including inputs the app does not own (ag-grid filter boxes, and
 * any input a browser or extension injects into the page).
 *
 * The `spellcheck` content attribute is the only switch: it is the default for
 * every <input>/<textarea>, and browsers honour it as a presentational hint
 * regardless of the element's own attribute.
 *
 * `TextInput` (src/components/TextInput.jsx) additionally sets spellCheck=false
 * per input, which covers fields React re-renders. This rule is the backstop
 * that also covers DOM we do not create.
 * ──────────────────────────────────────────────────────────────────────────── */
input,
textarea,
[contenteditable] {
  spellcheck: false;
}

html {
  scrollbar-gutter: stable;
}

/* While the assistant chat drawer is open on the right edge of the screen,
   lock page scrolling so the background scrollbar is hidden and does not
   show behind or beside the drawer. */
html.df-chat-open,
html.df-chat-open body {
  overflow: hidden !important;
}

html.df-chat-open,
html.df-chat-open body,
html.df-chat-open #root {
  background-color: #ffffff;
}

/* While any AppDialog is open, the reserved scrollbar-gutter strip must read
   as fog, not app background. AppDialog toggles `df-dialog-open` on <html>
   (ref-counted for stacked dialogs). The solid fog token is published by
   src/colors.js (installCssVars) with a hard-coded fallback. */
html.df-dialog-open,
html.df-dialog-open body,
html.df-dialog-open #root {
  background-color: var(--df-dialog-fog, #345585);
}

/* SortableJS: Kategorie-Reorder im Edit-Modus.
   Colors come from CSS custom properties injected by src/colors.js
   (installCssVars), so this file stays in sync with the JS token module.
   Plain CSS cannot import the JS module directly. */
.sortable-ghost {
  opacity: 0.35 !important;
  outline: 2px dashed var(--df-sort-ghost, #15803d);
  outline-offset: 2px;
  background-color: var(--df-sort-ghost-tint, rgba(21, 128, 61, 0.12)) !important;
}

.sortable-chosen {
  box-shadow: var(--df-shadow-sortable, 0 4px 16px rgba(15, 23, 42, 0.12));
}

.drag-handle {
  cursor: grab;
  touch-action: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.sortable-drag {
  opacity: 1 !important;
  box-shadow: var(--df-shadow-drag, 0 8px 20px rgba(15, 23, 42, 0.28));
  cursor: grabbing !important;
  user-select: none !important;
}