/* Demo-only adjustments for the pos module (hand-written, not generated). Keep empty unless a
   difference against the real app cannot be fixed by matching its DOM / widget options.

   1. src/shell.css gives every .pui `line-height: 1.15`; POSUI's <body> has the browser default.
   2. src/styles.css has unscoped utility classes (.input, .select, .toggle, .badge, .tab, .modal,
      .toast, ...) that POSUI's own markup also uses. Revert what they set inside the till so only
      POSUI's stylesheet (assets/pos/css/ddd-pos.css, specificity .pui--pos .x) applies, like in the
      real app. :where() keeps these at the specificity of the demo rules they undo. Can be deleted
      once those selectors in src/styles.css get `:not(.pui *)` like `.page` already has. */
.pui.pui--pos { line-height: normal; }
:where(.pui--pos) .btn { align-items: revert; border: revert; border-radius: revert; cursor: revert; display: revert; font-size: revert; font-weight: revert; gap: revert; height: revert; justify-content: revert; line-height: revert; min-width: revert; padding: revert; transition: revert; user-select: revert; white-space: revert; }
:where(.pui--pos) .card { background: revert; border: revert; border-radius: revert; }
:where(.pui--pos) .tabs { border-bottom: revert; display: revert; gap: revert; overflow-x: revert; scrollbar-width: revert; }
:where(.pui--pos) .tab.active { border-color: revert; color: revert; font-weight: revert; }
:where(.pui--pos) .toast.info, :where(.pui--pos) .toast.err { background: revert; color: revert; }
:where(.pui--pos) .btn:disabled { cursor: revert; opacity: revert; }
:where(.pui--pos) .input { background: revert; border: revert; border-radius: revert; color: revert; font-family: revert; font-size: revert; height: revert; min-height: revert; outline: revert; padding: revert; transition: revert; width: revert; }
:where(.pui--pos) .select { background: revert; border: revert; border-radius: revert; color: revert; font-family: revert; font-size: revert; height: revert; min-height: revert; outline: revert; padding: revert; transition: revert; width: revert; }
:where(.pui--pos) .textarea { background: revert; border: revert; border-radius: revert; color: revert; font-family: revert; font-size: revert; height: revert; min-height: revert; outline: revert; padding: revert; transition: revert; width: revert; }
:where(.pui--pos) .input:hover { border-color: revert; }
:where(.pui--pos) .select:hover { border-color: revert; }
:where(.pui--pos) .textarea:hover { border-color: revert; }
:where(.pui--pos) .input:focus { border-color: revert; }
:where(.pui--pos) .select:focus { border-color: revert; }
:where(.pui--pos) .textarea:focus { border-color: revert; }
:where(.pui--pos) .input:disabled { background: revert; color: revert; }
:where(.pui--pos) .input::placeholder { color: revert; }
:where(.pui--pos) .toggle { background: revert; border: revert; border-radius: revert; cursor: revert; flex-shrink: revert; height: revert; position: revert; transition: revert; width: revert; }
:where(.pui--pos) .toggle::after { background: revert; border-radius: revert; content: revert; height: revert; left: revert; position: revert; top: revert; transition: revert; width: revert; }
:where(.pui--pos) .pager { align-items: revert; color: revert; display: revert; font-size: revert; gap: revert; justify-content: revert; padding: revert; }
:where(.pui--pos) .badge { align-items: revert; border-radius: revert; display: revert; font-size: revert; font-weight: revert; gap: revert; padding: revert; white-space: revert; }
:where(.pui--pos) .tabs::-webkit-scrollbar { display: revert; }
:where(.pui--pos) .tab { border-bottom: revert; color: revert; cursor: revert; flex-shrink: revert; font-size: revert; margin-bottom: revert; padding: revert; white-space: revert; }
:where(.pui--pos) .tab:hover { background: revert; color: revert; }
:where(.pui--pos) .drawer { animation: revert; background: revert; bottom: revert; box-shadow: revert; display: revert; flex-direction: revert; position: revert; right: revert; top: revert; width: revert; z-index: revert; }
:where(.pui--pos) .modal { animation: revert; background: revert; border-radius: revert; box-shadow: revert; left: revert; max-height: revert; overflow: revert; position: revert; top: revert; transform: revert; width: revert; z-index: revert; }
:where(.pui--pos) .toast { align-items: revert; animation: revert; background: revert; border-radius: revert; box-shadow: revert; color: revert; display: revert; font-size: revert; gap: revert; padding: revert; }
/* 3. angular.js injects this rule itself (angular-csp.css) - it is not part of POSUI's stylesheet */
.pui--pos .ng-hide:not(.ng-hide-animate) { display: none !important; }
/* 4. Tailwind (cdn.tailwindcss.com) generates `.container { max-width: <breakpoint> }` for the keypad's
      `.container.keyboard-wrap`; POSUI's bootstrap .container rules are all under .bootstrap-wrapper /
      .use-bootstrap, so in the real till the keypad is full width. */
.pui--pos .container { max-width: none; }