@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,
   the reserved scrollbar-gutter strip must read as white to seamlessly
   continue the drawer surface. */
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;
}