/* ========================================
   CINNext POS - Design System (light and dark mode)
   Tokens, shell (sidebar, topbar, main), overlays, toasts and progress bars
   are taken from CINNext (../crm/public/css/crm.css). POS additions follow
   at the end of the file (tiles, cart, status chips, touch sizes).
   ======================================== */

:root,
[data-bs-theme=light] {
  /* CIN Brand Colors */
  --cin-primary-hover: #152b4d;
  --cin-primary-light: #2a4875;

  /* Soft-UI Accent Colors */
  --cin-soft-primary: #5B4DFF;
  --cin-soft-primary-light: #8B80FF;

  /* Modern Backgrounds */
  --cin-background: #f3f4f6;
  --cin-background-rgb: 243, 244, 246;
  --cin-bg-secondary: #f9fafb;
  --cin-bg-tertiary: #f3f4f6;
  --cin-bg-elevated: #ffffff;

  /* Text Colors */
  --cin-foreground: #111827;
  --cin-text-secondary: #6b7280;
  --cin-text-muted: #9ca3af;
  --cin-text-inverse: #ffffff;

  /* Borders */
  --cin-border: #f1f5f9;
  --cin-border-secondary: #e5e7eb;
  --cin-thread-border: #e2e8f0;

  /* Shadows - Modern soft shadows */
  --cin-shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.05);
  --cin-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --cin-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --cin-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --cin-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Spacing System */
  --cin-spacing-xs: 0.5rem;
  --cin-spacing-sm: 0.75rem;
  --cin-spacing: 1rem;
  --cin-spacing-lg: 1.5rem;
  --cin-spacing-xl: 2rem;
  --cin-spacing-2xl: 3rem;

  /* Surface Colors */
  --cin-surface: #ffffff;
  --cin-surface-subtle: #f9fafb;
  --cin-surface-raised: #f3f4f6;
  --cin-surface-hover: #f3f4f6;
  --cin-surface-active: #e5e7eb;

  /* Accent/Focus */
  --cin-accent: #f9fafb;
  --cin-accent-foreground: #111827;
  --cin-accent-soft: #e8f0ff;
  --cin-accent-hover: #0056a0;
  --cin-ring: #5B4DFF;

  /* Status/Semantic Colors */
  --cin-success: #10b981;
  --cin-success-light: #d1fae5;
  --cin-warning: #f59e0b;
  --cin-warning-light: #fef3c7;
  --cin-danger: #ef4444;
  --cin-danger-light: #fee2e2;
  --cin-info: #3b82f6;
  --cin-info-light: #dbeafe;

  /* Overlay backdrop (one shared node, see #pos-overlay-backdrop) */
  --cin-overlay-backdrop: rgba(255, 255, 255, 0.3);

  /* POS tokens: sidebar and active navigation reference the Bootstrap tokens compiled from
     bs-override/bootstrap.scss (--bs-tertiary = $tertiary brand blue, --bs-primary = $primary),
     so a token change in CINNext reaches the POS without touching this file; the voucher
     colour is the CIN task-review violet from crm.css */
  --pos-sidebar-bg: var(--bs-tertiary, #1b3661);
  --pos-sidebar-bg-hover: rgba(255, 255, 255, 0.08);
  --pos-sidebar-bg-active: var(--bs-primary, #0067b4);
  --pos-sidebar-color: rgba(255, 255, 255, 0.82);
  --pos-sidebar-color-strong: #ffffff;
  --pos-sidebar-muted: rgba(255, 255, 255, 0.55);
  --pos-sidebar-border: rgba(255, 255, 255, 0.12);
  --pos-voucher: #8b5cf6;
  --pos-voucher-hover: #7c3aed;
  --pos-voucher-active: #6d28d9;
  --pos-tile-placeholder: #e8f0ff;
  --pos-status-unavailable: #9ca3af;
  --pos-touch-min: 44px;

  /* Legacy */
  --nav-tabs-link-active-color: #000;
}

[data-bs-theme=dark] {
  /* Native form controls follow the dark theme */
  color-scheme: dark;

  /* CIN Brand Colors */
  --cin-primary-hover: #4a7cd8;
  --cin-primary-light: #6c9df0;

  /* Soft-UI Accent Colors */
  --cin-soft-primary: #7B6DFF;
  --cin-soft-primary-light: #9B90FF;

  /* Modern Backgrounds */
  --cin-background: #0d1117;
  --cin-background-rgb: 13, 17, 23;
  --cin-bg-secondary: #161b22;
  --cin-bg-tertiary: #1f2937;
  --cin-bg-elevated: #1f2937;

  /* Text Colors */
  --cin-foreground: #e6edf3;
  --cin-text-secondary: #9ca3af;
  --cin-text-muted: #6b7280;
  --cin-text-inverse: #0d1117;

  /* Borders */
  --cin-border: #30363d;
  --cin-border-secondary: #21262d;
  --cin-thread-border: #3b4252;

  /* Shadows - Darker for dark mode */
  --cin-shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.3);
  --cin-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --cin-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --cin-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.6);
  --cin-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.7), 0 8px 10px -6px rgb(0 0 0 / 0.7);

  /* Spacing System */
  --cin-spacing-xs: 0.5rem;
  --cin-spacing-sm: 0.75rem;
  --cin-spacing: 1rem;
  --cin-spacing-lg: 1.5rem;
  --cin-spacing-xl: 2rem;
  --cin-spacing-2xl: 3rem;

  /* Surface Colors */
  --cin-surface: #161b22;
  --cin-surface-subtle: #1f2937;
  --cin-surface-raised: #2a2d35;
  --cin-surface-hover: #1f2937;
  --cin-surface-active: #2a2d35;

  /* Accent/Focus */
  --cin-accent: #1f2937;
  --cin-accent-foreground: #e6edf3;
  --cin-accent-soft: #1a2942;
  --cin-accent-hover: #4a7cd8;
  --cin-ring: #7B6DFF;

  /* Status/Semantic Colors */
  --cin-success: #10b981;
  --cin-success-light: #064e3b;
  --cin-warning: #f59e0b;
  --cin-warning-light: #422006;
  --cin-danger: #ef4444;
  --cin-danger-light: #450a0a;
  --cin-info: #3b82f6;
  --cin-info-light: #172554;

  --cin-overlay-backdrop: rgba(0, 0, 0, 0.45);

  /* POS tokens: dark sidebar from the CIN surface tokens above, active entry from --bs-primary */
  --pos-sidebar-bg: var(--cin-bg-secondary);
  --pos-sidebar-bg-hover: rgba(255, 255, 255, 0.08);
  --pos-sidebar-bg-active: var(--bs-primary, #0067b4);
  --pos-sidebar-color: rgba(255, 255, 255, 0.82);
  --pos-sidebar-color-strong: #ffffff;
  --pos-sidebar-muted: rgba(255, 255, 255, 0.5);
  --pos-sidebar-border: rgba(255, 255, 255, 0.12);
  --pos-voucher: #a78bfa;
  --pos-voucher-hover: #8b5cf6;
  --pos-voucher-active: #7c3aed;
  --pos-tile-placeholder: #1a2942;
  --pos-status-unavailable: #6b7280;
  --pos-touch-min: 44px;

  /* Bootstrap Variables */
  --bs-border-color: var(--cin-border);

  /* Legacy */
  --nav-tabs-link-active-color: #fff;
}

/* ========================================
   Base
   ======================================== */

/* Firefox */
@supports (-moz-appearance: none) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bs-primary-rgb), 0.5) rgba(var(--bs-primary-rgb), 0.3);
  }
}

/* Chrome, Edge und Safari */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0 3px rgba(var(--bs-primary-rgb), 0.3);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  box-shadow: inset 0 0 0 6px rgba(var(--bs-primary-rgb), 0.5);
  cursor: grab;
}

html,
body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  margin-bottom: var(--cin-spacing);
  line-height: 1.6;
}

small,
.text-small {
  font-size: 0.875rem;
  color: var(--cin-text-secondary);
}

/* Navigation tabs */
.nav-tabs .nav-link {
  color: var(--nav-tabs-link-active-color) !important;
}

.nav-tabs .nav-link.active {
  color: var(--bs-link-color) !important;
}

/* Nav Line (Underline Tabs) */
.nav.nav-line {
  border-bottom: 1px solid var(--bs-border-color);
  scrollbar-width: none;
  min-height: fit-content;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.nav.nav-line::-webkit-scrollbar {
  display: none;
}

.nav.nav-line .nav-item {
  flex-shrink: 0;
}

.nav.nav-line .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--cin-spacing-xs) var(--cin-spacing);
  color: var(--cin-text-secondary);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--pos-touch-min);
}

.nav.nav-line .nav-link:hover,
.nav.nav-line .nav-link:focus {
  color: var(--cin-foreground);
  border-bottom-color: var(--bs-primary);
  border-bottom-width: 1px;
}

.nav.nav-line .nav-link.active {
  color: var(--cin-foreground);
  border-bottom-color: var(--bs-primary);
  font-weight: 600;
}

.nav.nav-line .nav-link.disabled {
  color: var(--cin-text-muted);
  border-bottom-color: transparent;
}

/* Responsive height helpers (from crm.css) */
@media (min-width: 768px) {
  .layout-shell {
    height: 100dvh !important;
  }

  #main {
    -webkit-overflow-scrolling: touch;
  }

  .h-md-100 {
    height: 100% !important;
  }

  .vh-md-100 {
    height: 100vh !important;
  }
}

/* ========================================
   Layout: Topbar
   ======================================== */

.topbar {
  flex-shrink: 0;
  z-index: 1020;
}

.topbar .btn-light {
  border: 1px solid var(--cin-border);
}

.topbar .btn-light:hover {
  background-color: var(--cin-bg-tertiary);
  transform: translateY(-1px);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pos-topbar-card {
  box-shadow: var(--cin-shadow-xs);
}

.pos-topbar-product {
  letter-spacing: 0.02em;
}

.pos-topbar-location {
  max-width: 20rem;
}

.pos-topbar-separator {
  margin: 0 0.35rem;
  color: var(--cin-text-muted);
}

.pos-topbar-clock {
  color: var(--cin-text-secondary);
  font-variant-numeric: tabular-nums;
}

.pos-topbar-clock [data-clock-time] {
  color: var(--cin-foreground);
  font-size: 1.05rem;
}

#topbar-account,
#topbar-logout {
  min-height: var(--pos-touch-min);
}

#topbar-account [data-account-name] {
  max-width: 12rem;
}

/* Below 2048px the status chips take a row of their own: product/location, clock and account
   stay on the first line, the topbar never grows beyond two lines. */
@media (max-width: 2047.98px) {
  #topbar-status {
    order: 10;
    flex-basis: 100%;
    margin-left: 0 !important;
  }

  #topbar-clock {
    margin-left: auto;
  }
}

/* ========================================
   Layout: Main
   ======================================== */

#main-wrapper #main-wrapper-inner {
  min-width: 0;
  margin-top: 0 !important;
}

.main {
  scroll-behavior: smooth;
}

/* ========================================
   Layout: Sidebar (dark, brand blue)
   ======================================== */

#navigation,
.sidebar {
  background-color: var(--pos-sidebar-bg) !important;
  border-right: 1px solid var(--pos-sidebar-border) !important;
  box-shadow: var(--cin-shadow-sm);
  color: var(--pos-sidebar-color);
  z-index: 1030;
}

#navigation .pos-sidebar-panel,
#navigation .offcanvas-md {
  background-color: var(--pos-sidebar-bg) !important;
  color: var(--pos-sidebar-color);
  border-color: var(--pos-sidebar-border) !important;
}

#navigation .offcanvas-header {
  padding: var(--cin-spacing) var(--cin-spacing);
  border-bottom: 1px solid var(--pos-sidebar-border);
}

#navigation .pos-brand,
#navigation .offcanvas-title {
  color: var(--pos-sidebar-color-strong);
}

/* Brand logo (public/img/ci): the sidebar is dark in both themes and always shows the white
   variant; other places carry both variants and show the one matching data-bs-theme. */
.pos-brand-logo {
  display: block;
  height: 4.5rem;
  width: auto;
}

.pos-sidebar-mobile-bar .pos-brand-logo {
  height: 2.25rem;
}

[data-bs-theme="light"] .pos-logo-dark,
[data-bs-theme="dark"] .pos-logo-light {
  display: none !important;
}

.pos-install-logo {
  height: 4rem;
  width: auto;
}

.pos-sidebar-toggle {
  color: var(--pos-sidebar-color-strong);
  background: transparent;
  border: 0;
  min-height: var(--pos-touch-min);
}

#navigation .navigation-groups {
  padding: var(--cin-spacing-xs) var(--cin-spacing-sm);
}

#navigation .sidebar-item {
  margin-bottom: 0.25rem;
}

#navigation .sidebar-item-wrapper {
  --bs-btn-color: var(--pos-sidebar-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--pos-sidebar-color-strong);
  --bs-btn-hover-bg: var(--pos-sidebar-bg-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--pos-sidebar-color-strong);
  --bs-btn-active-bg: var(--pos-sidebar-bg-active);
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  align-items: center;
  min-height: var(--pos-touch-min);
  padding: 0.5rem 0.75rem;
  text-align: left;
  width: 100%;
}

#navigation .sidebar-item-wrapper a {
  color: inherit;
  min-height: 1.75rem;
}

#navigation .sidebar-item-wrapper .bi {
  font-size: 1.15rem;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

#navigation .sidebar-item-wrapper.active,
#navigation .sidebar-item-wrapper.btn-primary,
#navigation .sidebar-item.active .sidebar-item-wrapper {
  color: var(--pos-sidebar-color-strong);
  background-color: var(--pos-sidebar-bg-active);
  border-color: var(--pos-sidebar-bg-active);
  box-shadow: var(--cin-shadow-sm);
}

#navigation .offcanvas-footer {
  border-top: 1px solid var(--pos-sidebar-border);
  padding: var(--cin-spacing-sm);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pos-sidebar-location {
  padding: 0.5rem 0.75rem;
  border-radius: var(--bs-border-radius);
  background-color: var(--pos-sidebar-bg-hover);
  color: var(--pos-sidebar-color-strong);
}

.pos-sidebar-caption {
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: var(--pos-sidebar-muted);
}

.pos-sidebar-muted {
  color: var(--pos-sidebar-muted);
}

.pos-sidebar-help {
  color: var(--pos-sidebar-color);
  min-height: var(--pos-touch-min);
  padding: 0.5rem 0.75rem;
}

.pos-sidebar-help:hover,
.pos-sidebar-help:focus {
  color: var(--pos-sidebar-color-strong);
  background-color: var(--pos-sidebar-bg-hover);
}

.pos-sidebar-version {
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {

  #navigation,
  .sidebar {
    flex: 0 0 clamp(13rem, 17vw, 16rem);
    width: clamp(13rem, 17vw, 16rem);
    min-width: 13rem;
    max-width: 16rem;
  }

  #navigation.is-compact,
  .sidebar.is-compact {
    flex-basis: 4.5rem;
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
  }

  #navigation.is-compact .sidebar-menu-label,
  #navigation.is-compact .pos-brand-logo,
  #navigation.is-compact .pos-sidebar-location,
  #navigation.is-compact .pos-sidebar-version {
    display: none;
  }

  #navigation.is-compact .sidebar-item-wrapper,
  #navigation.is-compact .pos-sidebar-help {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 767.98px) {
  .pos-sidebar-mobile-bar {
    min-height: 3.25rem;
    background-color: var(--pos-sidebar-bg);
    color: var(--pos-sidebar-color-strong);
  }

  #navigation .offcanvas-md.offcanvas-end {
    width: min(85vw, 22rem);
  }
}

/* ========================================
   Overlays: modal + side modal (overlay stack)
   ======================================== */

.window-modal:not(.modal-sm):not(.modal-lg):not(.modal-xl) {
  --bs-modal-width: 520px;
}

.side-modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: var(--bs-border-width);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: var(--bs-box-shadow-sm);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: var(--bs-border-width);
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: var(--bs-border-width);
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  z-index: var(--bs-modal-zindex);
  background-color: var(--bs-modal-bg);
  box-shadow: var(--cin-shadow-xl);
  transition: right 0.3s ease-in-out;
  outline: 0;
}

.side-modal.show {
  right: 0%;
}

@media (min-width: 768px) {
  .side-modal[data-slot="1"] {
    width: 75%;
  }

  .side-modal[data-slot="2"] {
    width: 65%;
  }

  .side-modal[data-slot="3"] {
    width: 55%;
  }
}

.side-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  outline: 0;
}

.side-modal .modal-header {
  position: sticky;
  background-color: var(--bs-modal-bg);
}

.side-modal .modal-footer {
  background-color: var(--bs-modal-bg);
}

/* One shared backdrop (#pos-overlay-backdrop). Because there is physically only one blur node,
   the blur never compounds for N stacked overlays. The stack manager in Application.js sets its
   z-index (top overlay minus 5) and toggles .show. */
#pos-overlay-backdrop:not(.show) {
  display: none !important;
}

.modal-backdrop.show {
  background-color: var(--cin-overlay-backdrop, rgba(255, 255, 255, 0.3));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Clone sources of the base shells (modal.tpl / side-modal.tpl) are never visible. */
#pos-overlay-templates {
  display: none !important;
}

.window-modal .modal-header,
.window-modal .modal-footer,
.window-modal .modal-body {
  background-color: var(--cin-surface-raised);
}

.modal-footer.btn-row {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* ========================================
   Toasts (POS.note)
   ======================================== */

#pos-toasts {
  top: 4rem;
  z-index: 2100;
  pointer-events: none;
  max-width: 100vw;
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
}

#pos-toasts .toast {
  pointer-events: auto;
  width: min(360px, calc(100vw - 2rem));
  max-height: calc(100dvh - 6rem);
  overflow: auto;
}

@media (max-width: 575.98px) {
  #pos-toasts .toast {
    max-height: 28dvh;
  }
}

/* ========================================
   Progress bar (snippets/progressbar.tpl)
   ======================================== */

.bs-progress {
  height: 3px;
  overflow-x: hidden;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.bs-progress .line {
  opacity: 0.4;
  background: var(--bs-primary);
  width: 150%;
  height: 3px;
}

.bs-progress .subline {
  background: var(--bs-primary);
  height: 3px;
}

.bs-progress .inc {
  animation: progress_increase 2s infinite;
}

.bs-progress .dec {
  animation: progress_decrease 2s 0.5s infinite;
}

.field-progress.bs-progress {
  top: 0;
  height: 100%;
  border-radius: 20px;
}

.field-progress.bs-progress .subline {
  height: 100%;
}

.card-body>.bs-progress {
  border-top-left-radius: var(--bs-card-border-radius);
  border-top-right-radius: var(--bs-card-border-radius);
}

@keyframes progress_increase {
  from {
    left: -5%;
    width: 5%;
  }

  to {
    left: 130%;
    width: 100%;
  }
}

@keyframes progress_decrease {
  from {
    left: -80%;
    width: 80%;
  }

  to {
    left: 110%;
    width: 10%;
  }
}

/* Preload banner */
.app-preload-banner {
  z-index: 2000;
  background-color: var(--cin-overlay-backdrop);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.app-preload-banner-inner {
  width: max(300px, 25%);
  text-align: center;
}

.app-preload-logo {
  max-width: 100%;
  height: 6rem;
  margin-bottom: 1rem;
}

/* ========================================
   Forms: password action buttons (login, install)
   ======================================== */

.btn-password-action {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 30px;
  background: 0;
  border: 0;
  background-color: var(--bs-primary, #000);
  mask-position: center center;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  z-index: 9;
}

[data-passwordtogglefor] {
  right: 4px;
  -webkit-mask-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/><path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/><path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z"/><path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/></svg>');
  mask-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/><path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/><path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z"/><path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/></svg>');
}

[aria-type=password][type="text"]~[data-passwordtogglefor] {
  -webkit-mask-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M 10 7 C 12.21 7 14 8.79 14 11 C 14 13.21 12.21 15 10 15 C 7.79 15 6 13.21 6 11 C 6 8.79 7.79 7 10 7 Z M 10 8.5 C 8.62 8.5 7.5 9.62 7.5 11 C 7.5 12.38 8.62 13.5 10 13.5 C 11.38 13.5 12.5 12.38 12.5 11 C 12.5 9.62 11.38 8.5 10 8.5 Z M 10 3.5 C 14.61 3.5 18.6 6.65 19.7 11.06 C 19.8 11.46 19.56 11.87 19.16 11.97 C 18.75 12.07 18.35 11.83 18.25 11.43 C 17.31 7.68 13.92 5 10 5 C 6.08 5 2.69 7.68 1.75 11.43 C 1.65 11.83 1.25 12.08 0.84 11.98 C 0.44 11.88 0.2 11.47 0.3 11.07 C 1.4 6.65 5.39 3.5 10 3.5 Z"/></svg>');
  mask-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M 10 7 C 12.21 7 14 8.79 14 11 C 14 13.21 12.21 15 10 15 C 7.79 15 6 13.21 6 11 C 6 8.79 7.79 7 10 7 Z M 10 8.5 C 8.62 8.5 7.5 9.62 7.5 11 C 7.5 12.38 8.62 13.5 10 13.5 C 11.38 13.5 12.5 12.38 12.5 11 C 12.5 9.62 11.38 8.5 10 8.5 Z M 10 3.5 C 14.61 3.5 18.6 6.65 19.7 11.06 C 19.8 11.46 19.56 11.87 19.16 11.97 C 18.75 12.07 18.35 11.83 18.25 11.43 C 17.31 7.68 13.92 5 10 5 C 6.08 5 2.69 7.68 1.75 11.43 C 1.65 11.83 1.25 12.08 0.84 11.98 C 0.44 11.88 0.2 11.47 0.3 11.07 C 1.4 6.65 5.39 3.5 10 3.5 Z"/></svg>');
}

[data-passwordrandomizefor] {
  right: 32px;
  -webkit-mask-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M 10 2.5 C 5.86 2.5 2.5 5.86 2.5 10 C 2.5 14.14 5.86 17.5 10 17.5 C 14.14 17.5 17.5 14.14 17.5 10 C 17.5 9.62 17.47 9.25 17.42 8.89 C 17.35 8.44 17.68 8 18.14 8 C 18.51 8 18.84 8.26 18.9 8.62 C 18.96 9.07 19 9.53 19 10 C 19 14.97 14.97 19 10 19 C 5.03 19 1 14.97 1 10 C 1 5.03 5.03 1 10 1 C 12.31 1 14.41 1.87 16 3.29 L 16 2.25 C 16 1.84 16.34 1.5 16.75 1.5 C 17.16 1.5 17.5 1.84 17.5 2.25 L 17.5 5.25 C 17.5 5.66 17.16 6 16.75 6 L 13.75 6 C 13.34 6 13 5.66 13 5.25 C 13 4.84 13.34 4.5 13.75 4.5 L 15.1 4.5 C 13.76 3.26 11.97 2.5 10 2.5 Z"/></svg>');
  mask-image: url('data:image/svg+xml,<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M 10 2.5 C 5.86 2.5 2.5 5.86 2.5 10 C 2.5 14.14 5.86 17.5 10 17.5 C 14.14 17.5 17.5 14.14 17.5 10 C 17.5 9.62 17.47 9.25 17.42 8.89 C 17.35 8.44 17.68 8 18.14 8 C 18.51 8 18.84 8.26 18.9 8.62 C 18.96 9.07 19 9.53 19 10 C 19 14.97 14.97 19 10 19 C 5.03 19 1 14.97 1 10 C 1 5.03 5.03 1 10 1 C 12.31 1 14.41 1.87 16 3.29 L 16 2.25 C 16 1.84 16.34 1.5 16.75 1.5 C 17.16 1.5 17.5 1.84 17.5 2.25 L 17.5 5.25 C 17.5 5.66 17.16 6 16.75 6 L 13.75 6 C 13.34 6 13 5.66 13 5.25 C 13 4.84 13.34 4.5 13.75 4.5 L 15.1 4.5 C 13.76 3.26 11.97 2.5 10 2.5 Z"/></svg>');
}

[type="password"],
[aria-type=password][type="text"] {
  padding-right: calc(1.5em + 0.75rem);
}

input.password-create {
  padding-right: calc(1.5em + 0.75rem + 28px);
}

/* ========================================
   Touch targets (>= 44px for buttons and list rows on cash register screens)
   ======================================== */

.kasse-view .btn:not(.btn-sm),
.pos-login .btn:not(.btn-sm),
.pos-install .btn:not(.btn-sm),
.settings-view .btn:not(.btn-sm),
.kasse-view .form-control,
.pos-login .form-control {
  min-height: var(--pos-touch-min);
}

.kasse-view .btn-sm {
  min-height: 2.25rem;
}

.pos-table>tbody>tr>td {
  height: var(--pos-touch-min);
}

/* ========================================
   Login
   ======================================== */

.pos-login-card {
  max-width: 400px;
  box-shadow: var(--cin-shadow-lg);
}

.pos-login-logo {
  height: 6rem;
  max-width: 100%;
}

.pos-pin-input {
  letter-spacing: 0.4em;
  font-size: 1.25rem;
  text-align: center;
}

.pos-pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.pos-pin-keypad .btn {
  min-height: 3.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  border: 1px solid var(--cin-border-secondary);
}

.pos-pin-keypad .btn:active {
  background-color: var(--cin-accent-soft);
}

/* ========================================
   Install
   ======================================== */

.pos-install-card {
  max-width: 640px;
  box-shadow: var(--cin-shadow-lg);
}

.pos-install-steps {
  flex-wrap: wrap;
}

.pos-install-step {
  flex: 1 1 0;
  min-width: 7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem 0.5rem 0;
  border-bottom: 3px solid var(--cin-border-secondary);
  color: var(--cin-text-secondary);
  font-size: 0.875rem;
}

.pos-install-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--cin-surface-raised);
  font-weight: 600;
  font-size: 0.75rem;
}

.pos-install-step.active {
  color: var(--cin-foreground);
  border-bottom-color: var(--bs-primary);
  font-weight: 600;
}

.pos-install-step.active .pos-install-step-index {
  background-color: var(--bs-primary);
  color: #fff;
}

.pos-install-step.done {
  color: var(--cin-success);
  border-bottom-color: var(--cin-success);
}

.pos-install-step.done .pos-install-step-index {
  background-color: var(--cin-success);
  color: #fff;
}

/* install.js shows one panel at a time (.active / .d-none) */
.pos-install-panel {
  max-height: min(60dvh, 560px);
  overflow-y: auto;
  padding: 0.125rem 0.5rem 0.125rem 0.125rem;
}

.pos-install-panel.d-none {
  display: none;
}

.pos-install-done-icon {
  font-size: 4rem;
}

/* ========================================
   Status chips (colour + icon + text, never colour alone)
   ======================================== */

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  min-height: 2rem;
  border: 1px solid var(--cin-border-secondary);
  border-radius: 999px;
  background-color: var(--cin-surface);
  color: var(--cin-text-secondary);
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
}

.status-chip-sm {
  min-height: 1.5rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
}

.status-chip .bi {
  font-size: 0.9em;
}

.status-text {
  color: var(--cin-foreground);
}

.status-dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--pos-status-unavailable);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.status-chip[data-state="success"] .status-dot,
.status-chip[data-state="ok"] .status-dot,
.status-chip[data-state="online"] .status-dot,
.status-chip.status-success .status-dot {
  background-color: var(--cin-success);
  box-shadow: 0 0 0 2px var(--cin-success-light);
}

.status-chip[data-state="warning"] .status-dot,
.status-chip[data-state="pending"] .status-dot,
.status-chip[data-state="busy"] .status-dot,
.status-chip.status-warning .status-dot {
  background-color: var(--cin-warning);
  box-shadow: 0 0 0 2px var(--cin-warning-light);
}

.status-chip[data-state="danger"] .status-dot,
.status-chip[data-state="error"] .status-dot,
.status-chip[data-state="offline"] .status-dot,
.status-chip[data-state="blocked"] .status-dot,
.status-chip.status-danger .status-dot {
  background-color: var(--cin-danger);
  box-shadow: 0 0 0 2px var(--cin-danger-light);
}

.status-chip[data-state="success"],
.status-chip.status-success {
  border-color: color-mix(in srgb, var(--cin-success) 40%, var(--cin-border-secondary));
}

.status-chip[data-state="warning"],
.status-chip.status-warning {
  border-color: color-mix(in srgb, var(--cin-warning) 50%, var(--cin-border-secondary));
}

.status-chip[data-state="danger"],
.status-chip.status-danger {
  border-color: color-mix(in srgb, var(--cin-danger) 50%, var(--cin-border-secondary));
}

/* pos.js also sets bg-<colour> on the dot; keep the ring in the matching tint */
.status-chip .status-dot.bg-success {
  box-shadow: 0 0 0 2px var(--cin-success-light);
}

.status-chip .status-dot.bg-warning {
  box-shadow: 0 0 0 2px var(--cin-warning-light);
}

.status-chip .status-dot.bg-danger {
  box-shadow: 0 0 0 2px var(--cin-danger-light);
}

.status-chip .status-dot.bg-secondary {
  background-color: var(--pos-status-unavailable) !important;
}

/* ========================================
   Kasse: layout, toolbar, categories
   ======================================== */

.kasse-view {
  container-name: kasse;
}

.kasse-layout {
  min-height: 0;
}

.kasse-main,
.kasse-cart-col {
  min-height: 0;
}

.kasse-search-group .form-control {
  font-size: 1.05rem;
}

#kasse-scan-toggle[aria-pressed="true"] {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

#kasse-favorites[aria-pressed="true"] {
  color: #fff;
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.kasse-categories {
  scrollbar-width: none;
  padding-bottom: 0.125rem;
}

.kasse-categories::-webkit-scrollbar {
  display: none;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  border-radius: 999px;
  min-height: var(--pos-touch-min);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  white-space: nowrap;
}

.category-chip[aria-pressed="true"],
.category-chip.active {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.category-chip .category-chip-count {
  font-weight: 500;
}

.category-chip[aria-pressed="true"] .category-chip-count,
.category-chip.active .category-chip-count {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

.pos-pairing-input {
  width: 9rem;
  letter-spacing: 0.3em;
  text-align: center;
  font-weight: 600;
}

/* ========================================
   Kasse: article tile grid (container query: 2 → 3 → 4 → 5 → 6 columns)
   ======================================== */

.article-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.125rem;
}

@container (width >= 400px) {
  .article-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (width >= 560px) {
  .article-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container (width >= 720px) {
  .article-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@container (width >= 1000px) {
  .article-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.article-tile {
  --tile-color: var(--pos-tile-placeholder);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.article-tile:hover,
.article-tile:focus-visible {
  box-shadow: var(--cin-shadow-md);
  transform: translateY(-1px);
  outline: 0;
}

.article-tile:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
}

.article-tile:active {
  transform: scale(0.985);
}

.article-tile-image {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--tile-color, var(--pos-tile-placeholder));
  color: rgba(var(--bs-primary-rgb), 0.55);
  overflow: hidden;
}

.article-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-tile-img[src=""],
.article-tile-img:not([src]),
.article-tile-img[src="null"] {
  display: none;
}

.article-tile-icon {
  font-size: 2.25rem;
}

.article-tile-image:has(.article-tile-img:not([src=""]):not([src="null"])) .article-tile-icon {
  display: none;
}

.article-tile-favorite {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  font-size: 0.875rem;
  color: var(--cin-warning);
  display: none;
}

.article-tile[data-favorite="1"] .article-tile-favorite,
.article-tile.is-favorite .article-tile-favorite {
  display: block;
}

.article-tile-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0.625rem 0.75rem 0.625rem;
  gap: 0.125rem;
}

.article-tile-name {
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}

.article-tile-meta:empty {
  display: none;
}

.article-tile-price {
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.article-tile-add {
  width: var(--pos-touch-min);
  height: var(--pos-touch-min);
  min-height: var(--pos-touch-min);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.kasse-articles-wrap {
  padding-right: 0.25rem;
}

/* Empty state rendered by kasse.js inside the grid */
.article-grid .kasse-empty {
  grid-column: 1 / -1;
}

/* ========================================
   Kasse: cart
   ======================================== */

.kasse-cart {
  box-shadow: var(--cin-shadow-sm);
}

.kasse-cart .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--cin-border-secondary);
}

.kasse-cart.kasse-unpaired {
  opacity: 0.85;
}

.kasse-cart.kasse-unpaired .cart-actions {
  filter: grayscale(0.4);
}

.cart-line {
  min-height: 3.75rem;
  border-bottom: 1px solid var(--cin-border);
  transition: background-color 0.15s ease;
}

.cart-line:hover {
  background-color: var(--cin-surface-hover);
}

.cart-line.is-highlight {
  background-color: var(--cin-accent-soft);
}

.cart-line-name {
  font-weight: 600;
}

.cart-qty-group {
  gap: 0.125rem;
}

.cart-qty-group .btn {
  width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cin-border-secondary);
}

.cart-qty {
  min-width: 2.25rem;
  font-variant-numeric: tabular-nums;
}

.cart-line-total {
  min-width: 4.5rem;
  font-variant-numeric: tabular-nums;
}

.cart-summary {
  background-color: var(--cin-surface-subtle);
}

.cart-total {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart-payment-panel {
  background-color: var(--cin-surface-subtle);
}

.cart-actions {
  background-color: transparent;
  border-top: 1px solid var(--cin-border-secondary);
}

.pay-buttons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pay-button {
  min-height: 3.5rem;
  font-weight: 600;
  transition: opacity 0.15s ease;
}

/* kasse.js toggles .disabled-look while the cart is empty (buttons stay clickable and explain themselves) */
.pay-button.disabled-look {
  opacity: 0.55;
}

.cart-line-remove {
  min-width: 2.25rem;
  min-height: 2.25rem;
}

.function-buttons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.function-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-height: 3.25rem;
  padding: 0.375rem 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.2;
}

.function-button .bi {
  font-size: 1.1rem;
}

/* Voucher button: violet from the CIN token set, own class since Bootstrap has no violet theme colour */
.btn-voucher {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--pos-voucher);
  --bs-btn-border-color: var(--pos-voucher);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pos-voucher-hover);
  --bs-btn-hover-border-color: var(--pos-voucher-hover);
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--pos-voucher-active);
  --bs-btn-active-border-color: var(--pos-voucher-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--pos-voucher);
  --bs-btn-disabled-border-color: var(--pos-voucher);
}

.btn-outline-voucher {
  --bs-btn-color: var(--pos-voucher);
  --bs-btn-border-color: var(--pos-voucher);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pos-voucher);
  --bs-btn-hover-border-color: var(--pos-voucher);
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--pos-voucher-active);
  --bs-btn-active-border-color: var(--pos-voucher-active);
  --bs-btn-disabled-color: var(--pos-voucher);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--pos-voucher);
}

/* Cart column: on narrow screens the cart follows the catalogue; the payment
   actions stay reachable without scrolling the page. */
@media (max-width: 991.98px) {
  .kasse-layout {
    height: auto !important;
  }

  .kasse-main {
    min-height: 60dvh;
  }

  .kasse-cart .cart-lines {
    max-height: 40dvh;
  }
}

/* ========================================
   Kasse P2: server receipt (selection, discount badge, customer line) and dialogs
   ======================================== */

/* Selected cart line (click or Enter): border plus tint, so the selection is not colour only */
.cart-line {
  cursor: pointer;
  border-left: 3px solid transparent;
}

.cart-line.selected {
  background-color: var(--cin-accent-soft);
  border-left-color: var(--bs-primary);
}

.cart-line:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.35);
}

.cart-line-discount {
  font-size: 0.7rem;
  vertical-align: middle;
}

.cart-customer {
  background-color: var(--cin-surface-subtle);
  min-height: var(--pos-touch-min);
}

.cart-customer[data-has-customer="1"] [data-customer-name] {
  font-weight: 600;
  color: var(--cin-foreground);
}

.cart-customer .btn-link {
  min-height: 2.25rem;
}

.cart-receipt-state {
  background-color: var(--cin-surface-subtle);
}

/* Stock info button on the tile (top left of the image box, 44px touch target) */
.article-tile-info {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: var(--pos-touch-min);
  height: var(--pos-touch-min);
  min-height: var(--pos-touch-min);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0.85;
  z-index: 1;
}

.article-tile-info:hover,
.article-tile-info:focus-visible {
  opacity: 1;
}

/* Dialogs cloned from the tpl-dlg-* templates: touch sizes, keypad, amounts, action row */
.pos-dialog .btn:not(.btn-sm) {
  min-height: var(--pos-touch-min);
}

.pos-dialog .form-control {
  min-height: var(--pos-touch-min);
}

/* A button inside an input group follows the fractional line height of the input; one extra
   pixel keeps the touch target at 44 px or more on every zoom level. */
.pos-dialog .input-group .btn {
  min-height: calc(var(--pos-touch-min) + 1px);
}

.pos-dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.pos-dialog-actions .btn {
  min-height: 3.25rem;
}

.pos-dialog-subject,
.pos-dialog-preview {
  background-color: var(--cin-surface-subtle);
  border: 1px solid var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
  padding: 0.625rem 0.75rem;
}

.pos-dialog-amount {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.pos-dialog-amount-lg {
  font-size: 1.75rem;
}

.pos-amount-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
}

.pos-cash-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.pos-cash-quick .btn {
  min-height: var(--pos-touch-min);
  font-weight: 600;
}

.pos-cash-change-row {
  border-top: 1px solid var(--cin-border-secondary);
  padding-top: 0.5rem;
}

/* Three classes: the generic `.pos-dialog .btn:not(.btn-sm)` (44 px) must not win over the
   keypad size, and 48 px keeps the keys above the touch minimum even while the modal fades in
   (a composited layer reports fractional heights during the transition). */
.pos-dialog .pos-dialog-keypad .btn {
  min-height: 3rem;
}

.pos-completed-icon {
  font-size: 3rem;
}

.pos-completed-number {
  font-size: 2.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.pos-completed-figures dt {
  font-weight: 400;
  color: var(--cin-text-secondary);
}

.pos-completed-figures dd {
  margin-bottom: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.pos-completed-change dt,
.pos-completed-change dd {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bs-success);
}

.pos-stock-table tr.bCurrent td {
  font-weight: 600;
}

.pos-customer-list {
  max-height: 50vh;
  overflow-y: auto;
}

.pos-customer-row {
  min-height: var(--pos-touch-min);
}

.pos-parked-table td,
.pos-stock-table td {
  height: var(--pos-touch-min);
}

/* Dialog bodies carry their own action row: hide a modal footer without buttons (whitespace only) */
.window-modal .modal-footer:not(:has(*)) {
  display: none;
}

/* Sync chip opens Einstellungen › Synchronisation (pos.js) */
.status-chip-link {
  cursor: pointer;
}

.status-chip-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
}

/* ========================================
   Settings
   ======================================== */

.settings-panes {
  padding-top: 0.25rem;
}

.settings-pane.d-none {
  display: none;
}

/* Language files (Allgemein): the locale code field keeps the width of "xx-YY" */
.settings-locale-code {
  width: 7.5rem;
  flex: 0 0 auto;
}

.pos-table {
  --bs-table-bg: transparent;
}

.pos-table>thead>tr>th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cin-text-secondary);
  font-weight: 600;
  border-bottom-width: 1px;
}

/* Choice fields built by SettingsSubView.buildChoice (dropdown + hidden input, no native select) */
.pos-dropdown .dropdown-toggle {
  min-height: var(--pos-touch-min);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pos-dropdown .dropdown-menu {
  max-height: 16rem;
  overflow-y: auto;
}

.pos-dropdown .dropdown-item {
  min-height: 2.5rem;
}

.pos-dropdown .dropdown-item.active {
  background-color: var(--bs-primary);
  color: #fff;
}

.pos-pairing-code {
  padding: 0.5rem 1rem;
  border: 1px dashed var(--bs-primary);
  border-radius: var(--bs-border-radius);
  background-color: var(--cin-accent-soft);
}

.pos-pairing-code-value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  font-variant-numeric: tabular-nums;
  color: var(--bs-primary);
}

.pos-permissions {
  border: 1px solid var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
  padding: 0.75rem 1rem;
}

.pos-permissions legend {
  float: none;
  width: auto;
  padding: 0 0.25rem;
  margin-bottom: 0.25rem;
}

.pos-permissions-tree {
  max-height: 22rem;
  overflow-y: auto;
}

.pos-permission-group-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cin-text-secondary);
  margin: 0.75rem 0 0.25rem;
}

.pos-permission-group:first-child .pos-permission-group-title {
  margin-top: 0;
}

.pos-permission-leafs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.125rem 1rem;
}

.pos-permission-leafs .form-check {
  min-height: 2rem;
}

.pos-audit-terminal-filter {
  width: 11rem;
}

.pos-audit-table code {
  font-size: 0.8125rem;
}

/* ========================================
   Placeholder views (phases not yet delivered)
   ======================================== */

.placeholder-card {
  max-width: 420px;
  width: 100%;
  box-shadow: var(--cin-shadow-sm);
}

.placeholder-icon {
  font-size: 3rem;
}

/* ========================================
   Bons (receipt management, route "bons")
   ======================================== */

.bons-view .btn:not(.btn-sm),
.bons-view .form-control,
.bons-view .input-group-text {
  min-height: var(--pos-touch-min);
}

.bons-view .content-list-head .btn-group .btn.active {
  background-color: var(--bs-primary);
  color: #fff;
}

/* Filter fields: the settings dropdown build (buildChoice) needs the same touch height as inputs */
.bons-filter .pos-dropdown .dropdown-toggle {
  min-height: var(--pos-touch-min);
}

.bons-filter .form-label {
  color: var(--cin-text-secondary);
}

.bons-table>tbody>tr.bons-row {
  cursor: pointer;
}

.bons-table>tbody>tr.bons-row:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

.bons-table>tbody>tr.table-active>td:first-child {
  box-shadow: inset 3px 0 0 var(--bs-primary);
}

.bons-table>tbody>tr.bons-row-voided td:first-child,
.bons-table>tbody>tr.bons-row-cancelled td:first-child {
  text-decoration: line-through;
  color: var(--cin-text-secondary);
}

.bons-customer-cell {
  max-width: 12rem;
}

.bons-detail-body {
  scrollbar-width: thin;
}

.bons-detail-meta dt {
  font-weight: 500;
  color: var(--cin-text-secondary);
}

.bons-detail-meta dd {
  margin-bottom: 0.25rem;
  overflow-wrap: anywhere;
}

.bons-positions>tbody>tr>td,
.bons-payments>tbody>tr>td,
.bons-tax-summary>tbody>tr>td {
  min-height: var(--pos-touch-min);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.bons-totals {
  border-top: 1px solid var(--cin-border-secondary);
  padding-top: 0.5rem;
}

.bons-hash {
  font-size: 0.8125rem;
  cursor: help;
  word-break: break-all;
}

.bons-audit .list-group-item {
  background-color: transparent;
}

/* Receipt detail: the actions (take-back, void, refund, copy) stay visible at the bottom while the
   long detail scrolls (main actions reachable without scrolling). */
.bons-detail-column [data-detail-actions] {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background-color: var(--bs-card-bg, var(--bs-body-bg));
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

/* Settings: scope filter of the reasons tab and status filter of the outbox card */
.pos-reason-scope-filter,
.pos-queue-status-filter {
  min-width: 11rem;
}

.pos-queue-error {
  max-width: 16rem;
}

@media (min-width: 1200px) {
  .bons-layout {
    overflow: hidden;
  }

  .bons-list-column>.card,
  .bons-detail-column>.card {
    height: 100%;
  }
}

/* ========================================
   Reduced motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {

  .article-tile,
  .side-modal,
  .topbar .btn-light,
  #navigation,
  .sidebar {
    transition: none !important;
  }

  .bs-progress .inc,
  .bs-progress .dec {
    animation-duration: 4s;
  }
}

/* ========================================
   Kasse: bounded two column layout (catalogue scrolls, cart scrolls, pay buttons stay visible)
   ======================================== */

/* From the md container width the columns sit side by side; a wrapping flex row would size its
   line by the content, so the row is forced onto one line and the columns take the row height. */
@container (width >= 768px) {
  .kasse-layout {
    flex-wrap: nowrap;
  }

  .kasse-layout > .kasse-main,
  .kasse-layout > .kasse-cart-col {
    height: 100%;
  }
}

.cart-line-name {
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-qty-group .btn {
  width: var(--pos-touch-min);
  height: var(--pos-touch-min);
}

.pay-button {
  white-space: nowrap;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Compact cart line: the name gets the remaining width (two lines at most), quantity buttons
   stay at the touch minimum. */
.cart-qty-group {
  gap: 0;
}

.cart-qty {
  min-width: 2rem;
}

.cart-line-total {
  min-width: 3.75rem;
}

.cart-line-remove {
  min-width: 1.75rem;
  min-height: 1.75rem;
}

/* Inside the bounded columns only the scrolling areas (#kasse-articles wrap, #cart-lines) may
   shrink; toolbar, chips, pairing notice and the cart frame keep their height. */
#kasse-pairing,
.kasse-toolbar,
.kasse-categories,
.kasse-cart > :not(#cart-lines):not(.cart-lines-wrap) {
  flex-shrink: 0;
}

.pos-pairing-input {
  width: 11rem;
}

/* Narrow cart column (1024px screens): the payment buttons keep their label, the icon goes. */
.kasse-cart {
  container-type: inline-size;
}

@container (width < 360px) {
  .pay-button .bi {
    display: none;
  }
}

/* ========================================
   P3: fiscal state, printing (QZ Tray), receipt layouts, e-receipt
   ======================================== */

/* Status chips: TSE gateway states degraded/simulated (warning) and the QZ Tray chip (connected) */
.status-chip[data-state="degraded"] .status-dot,
.status-chip[data-state="simulated"] .status-dot {
  background-color: var(--cin-warning);
  box-shadow: 0 0 0 2px var(--cin-warning-light);
}

.status-chip[data-state="connected"] .status-dot {
  background-color: var(--cin-success);
  box-shadow: 0 0 0 2px var(--cin-success-light);
}

.status-chip[data-state="simulated"] {
  border-color: var(--cin-warning);
}

/* Settings groups (settings.js GROUPS): pills above the tab bar of the active group, touch height,
   scroll horizontally on narrow screens */
.settings-groups {
  /* In the column flex layout of the view the bar would shrink and clip its 44px buttons. */
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: 0.375rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.settings-groups .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--pos-touch-min, 44px);
  white-space: nowrap;
}

/* Settings tab bar: the tabs of the active group, scrolls horizontally on narrow screens */
.settings-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.settings-tabs .nav-link {
  white-space: nowrap;
}

/* Function buttons of the cart: seven actions since P3 (print copy, drawer), four columns when the column allows */
.function-buttons {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.function-button span {
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

@container (width < 400px) {
  .function-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Completed dialog: three actions (print, drawer, new receipt), e-receipt QR large for the phone */
.pos-completed-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pos-completed-actions .pos-completed-new {
  grid-column: 1 / -1;
}

.pos-completed-ebon-qr {
  width: min(60vw, 16rem);
  max-width: 100%;
}

.pos-completed-ebon-qr svg,
.bons-ebon-qr svg {
  width: 100%;
  height: auto;
  display: block;
  background-color: #fff;
  border-radius: var(--bs-border-radius);
}

.bons-ebon-qr {
  width: 10rem;
  max-width: 100%;
}

.bons-tse-block {
  border-top: 1px dashed var(--cin-border-secondary);
  padding-top: 0.5rem;
}

/* Receipt preview (print fallback and layout editor): white paper frame, monospace text form */
.pos-print-frame,
.pos-layout-preview-frame {
  width: 100%;
  min-height: 60vh;
  border: 1px solid var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
  background-color: #fff;
}

.pos-layout-preview-body {
  background-color: var(--cin-surface-subtle);
}

.pos-layout-preview-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8125rem;
  line-height: 1.25;
  white-space: pre;
  overflow-x: auto;
  min-height: 60vh;
  padding: 0.75rem;
  background-color: #fff;
  color: #111;
  border: 1px solid var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
}

.pos-layout-lines {
  min-height: 6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.pos-layout-group {
  border: 1px solid var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
  padding: 0.5rem 0.75rem 0.25rem;
}

.pos-layout-group legend {
  float: none;
  width: auto;
  font-size: 0.8125rem;
  padding: 0 0.25rem;
  margin-bottom: 0.25rem;
}

/* Mandatory blocks of § 6 KassenSichV: shown greyed out, never switchable */
.pos-layout-mandatory {
  opacity: 0.7;
  background-color: var(--cin-surface-subtle);
}

.pos-layout-printer-choice,
.pos-printer-terminal-filter {
  min-width: 12rem;
}

.pos-qz-info dd {
  overflow-wrap: anywhere;
}

.pos-tse-events code {
  font-size: 0.8125rem;
}

/* Settings and dialog buttons of P3 keep the touch height */
.settings-tse .btn:not(.btn-sm),
.settings-printers .btn:not(.btn-sm),
.settings-layouts .btn:not(.btn-sm),
.settings-mail .btn:not(.btn-sm) {
  min-height: var(--pos-touch-min);
}

/* ========================================
   P4: payments (mixed payment, card terminal, credit, invoice), settings tab "Zahlungen"
   ======================================== */

/* Four payment buttons in one row (cash, card, credit, invoice); the voucher placeholder sits in the function grid */
.pay-buttons {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pay-button {
  padding-inline: 0.25rem;
  font-size: 1rem;
  line-height: 1.15;
  white-space: normal;
}

@container (width < 400px) {
  .pay-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Payments booked on the receipt: rows keep the 44 px touch height, the void icon is a real target */
.cart-payments {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px dashed var(--cin-border-secondary);
}

.cart-payment {
  min-height: var(--pos-touch-min);
}

.cart-payment-void {
  min-width: 2.25rem;
  min-height: 2.25rem;
}

/* Card terminal chip: ready (success), busy (warning), none (neutral) */
.status-chip[data-state="ready"] .status-dot {
  background-color: var(--cin-success);
  box-shadow: 0 0 0 2px var(--cin-success-light);
}

.status-chip[data-state="ready"] {
  border-color: color-mix(in srgb, var(--cin-success) 40%, var(--cin-border-secondary));
}

/* Card dialog: large spinner while the terminal works, result icon */
.dlg-card [data-card-panel="status"] .spinner-border {
  width: 3rem;
  height: 3rem;
}

/* Terminal receipt text block (58/80 mm text, monospace) in the settings tab and the receipt management */
.pos-terminal-receipt {
  max-height: 24rem;
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
  background-color: var(--cin-surface-subtle);
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  white-space: pre;
}

/* Settings tab "Zahlungen" keeps the touch height of its buttons */
.settings-payments .btn:not(.btn-sm) {
  min-height: var(--pos-touch-min);
}

/* ========================================
   P4b: second factor and keys/cards
   ======================================== */

.pos-factor-qr svg {
  width: 12rem;
  max-width: 100%;
  height: auto;
  background: #fff;
  padding: 0.5rem;
  border-radius: var(--bs-border-radius);
}

.pos-recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.pos-recovery-code {
  display: block;
  min-height: var(--pos-touch-min);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
}

/* ========================================
   Anmeldung neu: login QR (scan hint, camera picture, printable QR card)
   ======================================== */

.pos-login-scan-hint {
  padding: 1rem;
  border: 1px dashed var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
  color: var(--bs-secondary-color);
}

.pos-login-scan-hint .bi {
  font-size: 3rem;
  color: var(--bs-primary);
}

.pos-qr-scan-area video {
  max-height: 16rem;
  object-fit: cover;
  background: #000;
}

.pos-login-qr svg {
  width: 14rem;
  max-width: 100%;
  height: auto;
  background: #fff;
  padding: 0.75rem;
  border-radius: var(--bs-border-radius);
}

.pos-token-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.pos-token-step {
  min-height: var(--pos-touch-min);
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
}

.pos-token-step[data-state="done"] {
  border-style: solid;
  border-color: var(--bs-success);
}

.pos-token-step[data-state="active"] {
  border-style: solid;
  border-color: var(--bs-primary);
}

/* ---------------------------------------------------------------------------
   P5: corrections (void, return, exchange) – red return lines in the cart,
   correction badges in the receipt management, correction and refund dialogs
   --------------------------------------------------------------------------- */

/* Return lines of an exchange: red tint and border, negative amounts; only the remove button stays */
.cart-line[data-direction="return"] {
  background-color: color-mix(in srgb, var(--bs-danger) 8%, transparent);
  border-left-color: var(--bs-danger);
}

.cart-line[data-direction="return"].selected {
  background-color: color-mix(in srgb, var(--bs-danger) 16%, transparent);
}

.cart-line[data-direction="return"] .cart-line-name,
.cart-line[data-direction="return"] .cart-line-total,
.cart-line[data-direction="return"] .cart-qty {
  color: var(--bs-danger);
}

.cart-line-return-badge {
  font-size: 0.7rem;
  vertical-align: middle;
}

/* Exchange summary above the total: return (red), sale, difference */
.cart-exchange-summary {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px dashed var(--cin-border-secondary);
}

#kasse-cart[data-receipt-kind="exchange"] .cart-total-row {
  border-top: 1px solid var(--cin-border-secondary);
  padding-top: 0.25rem;
}

.cart-receipt-state-exchange {
  color: var(--bs-primary);
  font-weight: 600;
}

/* "Erstatten" replaces the payment bar on a negative remaining amount (44 px touch height like the pay buttons) */
.refund-button {
  min-height: 3.5rem;
  font-weight: 600;
}

/* Correction badges and return rows in the receipt management */
.bons-kind-badge {
  margin-left: 0.25rem;
}

.bons-position-return td,
.bons-payment-refund td {
  color: var(--bs-danger);
}

.bons-position-return td:first-child {
  box-shadow: inset 3px 0 0 var(--bs-danger);
}

.bons-reference {
  min-height: var(--pos-touch-min);
}

.bons-corrections .bons-correction-row {
  min-height: var(--pos-touch-min);
  cursor: pointer;
}

.bons-corrections .bons-correction-row:hover {
  background-color: var(--cin-surface-hover);
}

.bons-corrections .bons-correction-row:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

/* Correction dialog: position rows with quantity and condition, refund rows */
.pos-correction-table td {
  vertical-align: middle;
}

.pos-correction-qty {
  width: 9rem;
  min-width: 9rem;
}

.pos-correction-qty .btn,
.pos-correction-qty .form-control {
  min-height: var(--pos-touch-min);
}

.pos-correction-condition {
  min-width: 11rem;
}

.pos-correction-condition .pos-dropdown .btn {
  min-height: var(--pos-touch-min);
}

.pos-correction-row.pos-correction-selected td {
  background-color: color-mix(in srgb, var(--bs-danger) 6%, transparent);
}

/* Take-back, step `select`: "Umtausch" and "Geld zurück" side by side, "Abbrechen" below across the width. */
.dlg-correction[data-correction-step="select"] .pos-dialog-actions [data-correction-action="cancel"] {
  order: 1;
  grid-column: 1 / -1;
}

/* Return, exchange and take-back: a taken back position is struck on the receipt. */
.dlg-correction:not([data-correction-mode="void"]) .pos-correction-selected .pos-correction-name {
  text-decoration: line-through;
  text-decoration-color: var(--bs-danger);
}

.pos-correction-row.pos-correction-exhausted td {
  color: var(--cin-text-secondary);
}

.pos-correction-refund {
  min-height: var(--pos-touch-min);
}

.pos-correction-refund-input {
  width: 11rem;
  flex: 0 0 auto;
}

.pos-correction-refund-input .form-control,
.pos-correction-refund-input .btn {
  min-height: var(--pos-touch-min);
}

.pos-correction-refund-disabled {
  opacity: 0.55;
}

/* Correction kind badge in the completion dialog */
.dlg-completed .pos-correction-kind {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.pos-completed-refunds {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bs-border-radius);
  background-color: color-mix(in srgb, var(--bs-danger) 8%, transparent);
  color: var(--bs-danger);
}

.pos-origin-positions {
  max-height: 14rem;
  overflow-y: auto;
}

.pos-origin-actions .btn {
  min-height: var(--pos-touch-min);
}

/* ---------------------------------------------------------------------------
   P6: vouchers, deposit lines, credit top-up, consignments
   --------------------------------------------------------------------------- */

/* Special cart lines: deposit under its article (indented, no quantity controls), vouchers,
   redemptions and top-ups with a fixed quantity; negative lines (empties, redemption) in red */
.cart-line[data-type="deposit"] {
  min-height: 2.75rem;
  background-color: var(--cin-surface-subtle);
}

.cart-line.cart-line-child {
  padding-left: 3.25rem !important;
  border-left: 3px solid var(--cin-border-secondary);
}

.cart-line.cart-line-child .cart-line-name {
  font-weight: 500;
  font-size: 0.9375rem;
}

.cart-line.cart-line-negative .cart-line-total,
.cart-line.cart-line-negative .cart-qty {
  color: var(--bs-danger);
}

.cart-line-type-badge {
  font-size: 0.7rem;
  vertical-align: middle;
}

/* Second function grid ("Mehr"): same columns as the main grid, opened on demand so the cart lines
   keep their room; the toggle in the cart header keeps the 44 px touch height */
.function-buttons-more .function-button {
  min-height: 3.25rem;
}

#cart-functions-toggle {
  min-height: var(--pos-touch-min, 2.75rem);
}

/* Completion dialog: issued vouchers and the consignment hint */
.pos-completed-vouchers {
  border-top: 1px dashed var(--cin-border-secondary);
  padding-top: 0.5rem;
}

.pos-completed-voucher {
  min-height: 2.75rem;
}

/* Voucher redemption dialog: number and code in one row on wide screens */
.dlg-voucher-redeem input[name="number"] {
  min-width: 11rem;
  letter-spacing: 0.04em;
}

.dlg-voucher-redeem input[name="code"] {
  max-width: 9rem;
  letter-spacing: 0.08em;
}

/* Receipt management: position type badges, indented deposit rows, negative rows */
.bons-type-badge {
  font-size: 0.65rem;
  vertical-align: middle;
}

.bons-position-child td:first-child {
  padding-left: 1.75rem;
  box-shadow: inset 3px 0 0 var(--cin-border-secondary);
}

.bons-position-negative td {
  color: var(--bs-danger);
}

/* Settings: voucher history, article search results of the deposit assignment */
.pos-voucher-history .list-group-item,
.pos-deposit-article-results {
  max-height: 20rem;
  overflow-y: auto;
}

.pos-deposit-article-results .pos-customer-row {
  min-height: 2.75rem;
}

/* Consignment view: list rows and detail actions keep the 44 px touch height */
.kommissionen-table > tbody > tr {
  height: 2.75rem;
}

.kommissionen-customer-cell {
  max-width: 14rem;
}

.kommissionen-items td {
  font-variant-numeric: tabular-nums;
}

.kommissionen-receipts .list-group-item {
  min-height: 2.75rem;
}

/* Customer page: list and account side by side once #main is wide enough (container query, like the
   front panel editor); rows keep the 44 px touch height. */
.kunden-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.kunden-layout > [class^="kunden-col-"] {
  min-width: 0;
}

@container (width >= 992px) {
  .kunden-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.kunden-table > tbody > tr {
  height: 2.75rem;
}

.kunden-balances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem;
}

.kunden-balance {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
  background-color: var(--cin-surface);
  font-variant-numeric: tabular-nums;
}

.kunden-entry {
  min-height: 2.75rem;
}

/* Small dropdown inside the return dialog rows */
.pos-dropdown-sm .btn {
  min-height: 2.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
}

/* ------------------------------------------------------------------------------------------
   P7: cash book (register keys, count sheet, movement / closing dialogs, tip block, cash book view,
   settings tab "Steuern und Konten")
   ------------------------------------------------------------------------------------------ */

/* Cash book grid of the register: same key size as the P6 grid */
.function-buttons-cash .function-button {
  min-height: 3.25rem;
}

#cart-cash-toggle {
  min-height: var(--pos-touch-min, 2.75rem);
}

/* Count sheet: one row per denomination, count field with steppers (44 px), line amount */
.pos-count-sheet {
  max-height: 22rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.pos-count-row {
  min-height: var(--pos-touch-min, 2.75rem);
}

.pos-count-row[data-count-kind="coin"] .pos-count-label {
  color: var(--cin-text-secondary);
}

.pos-count-label {
  flex: 0 0 4.5rem;
  font-variant-numeric: tabular-nums;
}

.pos-count-group {
  flex: 0 1 11rem;
}

.pos-count-group .btn {
  min-height: var(--pos-touch-min, 2.75rem);
  min-width: 2.75rem;
}

.pos-count-input {
  min-height: var(--pos-touch-min, 2.75rem);
  max-width: 4.5rem;
  font-variant-numeric: tabular-nums;
}

.pos-count-amount {
  flex: 1 1 auto;
  font-variant-numeric: tabular-nums;
}

.pos-count-details > summary {
  cursor: pointer;
  list-style: none;
  min-height: var(--pos-touch-min, 2.75rem);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
  background-color: var(--cin-surface-subtle);
}

.pos-count-details > summary::-webkit-details-marker {
  display: none;
}

.pos-count-details[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Tip block of the cash and card dialogs */
.pos-cash-tip .btn {
  min-height: var(--pos-touch-min, 2.75rem);
}

.pos-cash-tip input[name="tip"] {
  font-size: 1.125rem;
}

/* Blocking receipts of the Z closing */
.pos-open-receipts {
  max-height: 18rem;
  overflow-y: auto;
}

.pos-open-receipt {
  min-height: var(--pos-touch-min, 2.75rem);
}

/* Closing dialog: figure rows stay readable on a phone */
.dlg-closing .pos-completed-figures dd {
  margin-left: 1rem;
}

/* Cash book view: session bar, tables with 44 px rows, detail figures */
.kassenbuch-session .status-chip {
  min-height: 2rem;
}

.kassenbuch-table > tbody > tr {
  height: 2.75rem;
}

.kassenbuch-figures td,
.kassenbuch-figures th {
  font-variant-numeric: tabular-nums;
}

.kassenbuch-figures thead th {
  font-weight: 600;
  color: var(--cin-text-secondary);
  font-size: 0.8125rem;
}

.kassenbuch-block + .kassenbuch-block {
  border-top: 1px dashed var(--cin-border-secondary);
  padding-top: 0.75rem;
}

.kassenbuch-detail-list .list-group-item {
  min-height: 2.75rem;
}

.kassenbuch-closing-body dl dd {
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1200px) {
  .kassenbuch-closings,
  .kassenbuch-tips {
    min-height: 0;
  }
}

/* Settings: chart filter of the account mappings */
.pos-accounting-chart-filter {
  min-width: 8rem;
}

/* ========================================
   P8 Reports: chart palette (Bootstrap tokens, light and dark), KPI tiles, SVG charts, heatmap
   ======================================== */

:root,
[data-bs-theme=light] {
  --pos-chart-1: var(--bs-primary, #0067b4);
  --pos-chart-2: var(--bs-tertiary, #1b3661);
  --pos-chart-3: var(--bs-success, #10b981);
  --pos-chart-4: var(--bs-warning, #f59e0b);
  --pos-chart-5: var(--bs-info, #3b82f6);
  --pos-chart-6: var(--bs-danger, #ef4444);
  --pos-chart-7: var(--bs-secondary, #e87d0c);
  --pos-chart-8: var(--cin-soft-primary, #5B4DFF);
}

[data-bs-theme=dark] {
  --pos-chart-2: var(--cin-primary-light, #6c9df0);
}

.berichte-view .berichte-ranges .btn,
.berichte-view .btn-group > .btn {
  min-height: var(--pos-touch-min, 2.75rem);
}

.berichte-view .btn-group-sm > .btn {
  min-height: 2rem;
}

.berichte-customer-results {
  position: absolute;
  z-index: 1030;
  max-height: 16rem;
  overflow-y: auto;
}

.berichte-customer-results.d-none {
  display: none;
}

.berichte-pane.d-none {
  display: none;
}

.berichte-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.75rem;
}

.berichte-kpi-value {
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.berichte-figures td,
.berichte-figures th {
  font-variant-numeric: tabular-nums;
}

.berichte-table > tbody > tr {
  height: 2.75rem;
}

.berichte-scroll {
  max-height: 24rem;
  overflow-y: auto;
}

.berichte-limit,
.berichte-export-type-filter {
  min-width: 9rem;
}

.berichte-export-log,
.datev-preview-raw {
  max-height: 16rem;
  overflow: auto;
  white-space: pre;
  background-color: var(--cin-surface-subtle);
  border: 1px solid var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
  padding: 0.5rem 0.75rem;
}

.berichte-export-figures dd {
  font-variant-numeric: tabular-nums;
}

.pos-loading {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

/* SVG charts (services/ChartService.js): the view box scales with the container */
.pos-chart-container {
  position: relative;
  width: 100%;
  color: var(--bs-body-color);
}

.pos-chart {
  display: block;
  width: 100%;
  height: auto;
  max-height: 22rem;
  overflow: visible;
}

.berichte-chart-sm .pos-chart {
  max-height: 14rem;
}

.pos-chart-label {
  font-size: 11px;
  fill: var(--cin-text-secondary);
}

.pos-chart-gridline {
  stroke: var(--bs-border-color);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.pos-chart-axis {
  stroke: var(--bs-border-color);
  stroke-width: 1;
}

.pos-chart-bar,
.pos-chart-point,
.pos-chart-cell {
  cursor: default;
  transition: opacity 0.12s ease;
}

.pos-chart-bar:hover,
.pos-chart-bar:focus,
.pos-chart-point:hover,
.pos-chart-point:focus,
.pos-chart-cell:hover,
.pos-chart-cell:focus {
  opacity: 0.75;
  outline: none;
}

.pos-chart-bar:focus-visible,
.pos-chart-point:focus-visible,
.pos-chart-cell:focus-visible {
  stroke: var(--cin-ring);
  stroke-width: 2;
}

.pos-chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.pos-chart-heatmap {
  max-height: none;
}

.pos-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--cin-text-secondary);
}

.pos-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.pos-chart-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
}

.pos-chart-empty {
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pos-chart-tooltip {
  position: fixed;
  z-index: 1090;
  max-width: 18rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--cin-foreground);
  background-color: var(--cin-bg-elevated);
  border: 1px solid var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--cin-shadow-md);
  pointer-events: none;
}

.pos-chart-tooltip.d-none {
  display: none;
}

.pos-chart-tooltip-title {
  font-weight: 600;
  margin-bottom: 0.125rem;
}

/* ========================================
   P9: single-line topbar with the status info symbol (traffic light, chips in a panel)
   ======================================== */

/* The topbar stays on one line: location truncates, the account keeps its width */
#global-topbar [data-topbar-actions] {
  min-height: 3.5rem;
}

.pos-topbar-location {
  max-width: none;
}

#sidebar-toggle,
#topbar-theme,
#topbar-security,
#topbar-status-toggle {
  min-height: var(--pos-touch-min);
  min-width: var(--pos-touch-min);
}

.pos-status-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.pos-status-toggle .pos-status-light {
  width: 0.75rem;
  height: 0.75rem;
}

.pos-status-toggle[data-status-level="ok"] .pos-status-light {
  background-color: var(--cin-success);
  box-shadow: 0 0 0 2px var(--cin-success-light);
}

.pos-status-toggle[data-status-level="warning"] .pos-status-light {
  background-color: var(--cin-warning);
  box-shadow: 0 0 0 2px var(--cin-warning-light);
}

.pos-status-toggle[data-status-level="error"] .pos-status-light {
  background-color: var(--cin-danger);
  box-shadow: 0 0 0 2px var(--cin-danger-light);
}

.pos-status-toggle[data-status-level="error"] {
  border-color: var(--cin-danger);
}

.pos-status-toggle[data-status-level="warning"] {
  border-color: var(--cin-warning);
}

.pos-status-count {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  font-size: 0.7rem;
  min-width: 1.25rem;
}

.pos-status-panel {
  min-width: 20rem;
  max-width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
  z-index: 1035;
}

.pos-status-panel .status-chip {
  white-space: normal;
  justify-content: flex-start;
}

.pos-status-panel .status-chip .status-text {
  overflow-wrap: anywhere;
}

/* ========================================
   P9: collapsible navigation (icon bar or hidden) with edge grip
   ======================================== */

.pos-sidebar-collapse {
  color: var(--pos-sidebar-color);
  background: transparent;
  border: 0;
  min-height: var(--pos-touch-min);
  min-width: var(--pos-touch-min);
  align-items: center;
  justify-content: center;
}

.pos-sidebar-collapse:hover,
.pos-sidebar-collapse:focus-visible {
  color: var(--pos-sidebar-color-strong);
  background-color: var(--pos-sidebar-bg-hover);
}

#navigation .offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pos-sidebar-handle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1025;
  width: 1.5rem;
  min-height: 5.5rem;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cin-border-secondary);
  border-left: 0;
  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
  background-color: var(--cin-surface);
  color: var(--cin-text-secondary);
  box-shadow: var(--cin-shadow-sm);
  cursor: pointer;
}

.pos-sidebar-handle:hover,
.pos-sidebar-handle:focus-visible {
  color: var(--cin-foreground);
  background-color: var(--cin-surface-hover);
  outline: 0;
}

body.pos-auth-route .pos-sidebar-handle {
  display: none !important;
}

@media (min-width: 768px) {
  #navigation,
  .sidebar {
    transition: flex-basis 0.2s ease, width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease;
  }

  #navigation.is-compact .pos-sidebar-collapse .bi {
    transform: rotate(180deg);
  }

  #navigation.is-compact .offcanvas-header {
    justify-content: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  #navigation.is-compact .pos-sidebar-help .bi,
  #navigation.is-compact .sidebar-item-wrapper .bi {
    width: auto;
  }

  #navigation.is-hidden {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #navigation,
  .sidebar,
  .cart-functions-block {
    transition: none !important;
  }
}

/* ========================================
   P9: function block under the payment bar (grip, slide in/out)
   ======================================== */

.cart-functions-handle {
  min-height: var(--pos-touch-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.125rem 0;
  margin-bottom: 0.25rem;
  border: 1px solid var(--cin-border);
  color: var(--cin-text-secondary);
  touch-action: pan-x;
}

.cart-functions-grip {
  display: block;
  width: 2.75rem;
  height: 0.3rem;
  border-radius: 999px;
  background-color: var(--cin-border-secondary);
}

.cart-functions-chevron {
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.cart-functions-handle[aria-expanded="false"] .cart-functions-chevron {
  transform: rotate(180deg);
}

.cart-functions-block {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease;
}

.cart-functions-block.is-collapsed,
.cart-functions-block[data-collapsed="1"] {
  grid-template-rows: 0fr;
}

.cart-functions-inner {
  min-height: 0;
  overflow: hidden;
}

.cart-functions-block.is-collapsed .cart-functions-inner,
.cart-functions-block[data-collapsed="1"] .cart-functions-inner {
  visibility: hidden;
}

/* ========================================
   P9: front panel tiles (pages, sizes, palette) and register tabs
   ======================================== */

.kasse-tabs {
  scrollbar-width: none;
  padding-bottom: 0.125rem;
}

.kasse-tabs::-webkit-scrollbar {
  display: none;
}

.kasse-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  min-height: var(--pos-touch-min);
  white-space: nowrap;
}

#kasse-keypad-toggle[aria-pressed="true"] {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.article-grid-panel {
  grid-auto-rows: minmax(8rem, auto);
  grid-auto-flow: dense;
}

.tile-size-2x1 {
  grid-column: span 2;
}

.tile-size-2x2 {
  grid-column: span 2;
  grid-row: span 2;
}

.tile-size-2x2 .article-tile-image {
  aspect-ratio: auto;
  flex-grow: 1;
  min-height: 6rem;
}

.article-grid[data-tile-height="sm"] .article-tile-image {
  aspect-ratio: 3 / 1;
}

.article-grid[data-tile-height="lg"] .article-tile-image {
  aspect-ratio: 1 / 1;
}

.article-grid-no-prices .article-tile-price {
  display: none;
}

@container (width >= 560px) {
  .article-grid[data-tile-columns="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .article-grid[data-tile-columns="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .article-grid[data-tile-columns="6"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.panel-tile-spacer {
  visibility: hidden;
  pointer-events: none;
}

.panel-tile-category .article-tile-image,
.panel-tile-page .article-tile-image {
  color: var(--tile-ink, rgba(var(--bs-primary-rgb), 0.7));
}

.article-tile-goto {
  font-size: 1.1rem;
}

/* Favourite of this register: pin marker (blue) in addition to the star of the global favourite */
.article-tile.is-terminal-favorite .article-tile-favorite {
  display: block;
  color: var(--bs-primary);
}

.article-tile.is-terminal-favorite .article-tile-favorite::before {
  content: "\f47e";
}

/* Palette tokens (never free colour values): tile surface and ink, key colours in both themes */
.tile-color-none { --tile-color: var(--pos-tile-placeholder); --tile-ink: rgba(var(--bs-primary-rgb), 0.55); }
.tile-color-blue { --tile-color: #dbeafe; --tile-ink: #1e40af; }
.tile-color-green { --tile-color: #d1fae5; --tile-ink: #065f46; }
.tile-color-red { --tile-color: #fee2e2; --tile-ink: #991b1b; }
.tile-color-yellow { --tile-color: #fef3c7; --tile-ink: #92400e; }
.tile-color-orange { --tile-color: #ffedd5; --tile-ink: #9a3412; }
.tile-color-purple { --tile-color: #ede9fe; --tile-ink: #5b21b6; }
.tile-color-teal { --tile-color: #ccfbf1; --tile-ink: #115e59; }
.tile-color-grey { --tile-color: #e5e7eb; --tile-ink: #374151; }

[data-bs-theme=dark] .tile-color-blue { --tile-color: #1e3a8a; --tile-ink: #bfdbfe; }
[data-bs-theme=dark] .tile-color-green { --tile-color: #064e3b; --tile-ink: #a7f3d0; }
[data-bs-theme=dark] .tile-color-red { --tile-color: #7f1d1d; --tile-ink: #fecaca; }
[data-bs-theme=dark] .tile-color-yellow { --tile-color: #78350f; --tile-ink: #fde68a; }
[data-bs-theme=dark] .tile-color-orange { --tile-color: #7c2d12; --tile-ink: #fed7aa; }
[data-bs-theme=dark] .tile-color-purple { --tile-color: #4c1d95; --tile-ink: #ddd6fe; }
[data-bs-theme=dark] .tile-color-teal { --tile-color: #134e4a; --tile-ink: #99f6e4; }
[data-bs-theme=dark] .tile-color-grey { --tile-color: #374151; --tile-ink: #e5e7eb; }

.article-tile[class*="tile-color-"]:not(.tile-color-none) .article-tile-image {
  color: var(--tile-ink);
}

.key-color-blue,
.key-color-green,
.key-color-red,
.key-color-yellow,
.key-color-orange,
.key-color-purple,
.key-color-teal,
.key-color-grey {
  --bs-btn-color: var(--key-color);
  --bs-btn-bg: var(--key-bg);
  --bs-btn-border-color: var(--key-color);
  --bs-btn-hover-color: var(--key-color);
  --bs-btn-hover-bg: var(--key-bg);
  --bs-btn-hover-border-color: var(--key-color);
  --bs-btn-active-color: var(--key-color);
  --bs-btn-active-bg: var(--key-bg);
  --bs-btn-active-border-color: var(--key-color);
}

.key-color-blue { --key-color: #1e40af; --key-bg: #dbeafe; }
.key-color-green { --key-color: #065f46; --key-bg: #d1fae5; }
.key-color-red { --key-color: #991b1b; --key-bg: #fee2e2; }
.key-color-yellow { --key-color: #92400e; --key-bg: #fef3c7; }
.key-color-orange { --key-color: #9a3412; --key-bg: #ffedd5; }
.key-color-purple { --key-color: #5b21b6; --key-bg: #ede9fe; }
.key-color-teal { --key-color: #115e59; --key-bg: #ccfbf1; }
.key-color-grey { --key-color: #374151; --key-bg: #e5e7eb; }

[data-bs-theme=dark] .key-color-blue { --key-color: #bfdbfe; --key-bg: #1e3a8a; }
[data-bs-theme=dark] .key-color-green { --key-color: #a7f3d0; --key-bg: #064e3b; }
[data-bs-theme=dark] .key-color-red { --key-color: #fecaca; --key-bg: #7f1d1d; }
[data-bs-theme=dark] .key-color-yellow { --key-color: #fde68a; --key-bg: #78350f; }
[data-bs-theme=dark] .key-color-orange { --key-color: #fed7aa; --key-bg: #7c2d12; }
[data-bs-theme=dark] .key-color-purple { --key-color: #ddd6fe; --key-bg: #4c1d95; }
[data-bs-theme=dark] .key-color-teal { --key-color: #99f6e4; --key-bg: #134e4a; }
[data-bs-theme=dark] .key-color-grey { --key-color: #e5e7eb; --key-bg: #374151; }

/* Locked key (shown by the layout, no right): looks inactive, explains itself on click */
.function-button.disabled-look,
.kasse-keypad-action.disabled-look {
  opacity: 0.55;
}

/* Tile context menu (right click / long press): positioned inside #kasse-view */
.kasse-view {
  position: relative;
}

.kasse-tile-menu {
  position: absolute;
  z-index: 1040;
  min-width: 16rem;
}

.kasse-tile-menu .dropdown-item {
  min-height: var(--pos-touch-min);
  display: flex;
  align-items: center;
}

/* ========================================
   P9: price keypad (tab of the tile area)
   ======================================== */

.kasse-keypad-input {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  max-width: 16rem;
}

.kasse-keypad-amount {
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
}

.kasse-keypad-quick {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

.kasse-view .kasse-keypad-quick .btn:not(.btn-sm),
.kasse-keypad-quick .btn {
  min-height: 3.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.kasse-keypad-keys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.kasse-view .kasse-keypad-keys .btn:not(.btn-sm),
.kasse-keypad-keys .btn {
  min-height: 3.5rem;
  font-size: 1.35rem;
  font-weight: 600;
  border: 1px solid var(--cin-border-secondary);
}

/* ========================================
   P9: front panel editor (settings)
   ======================================== */

/* Columns follow the width of #main (container), not the viewport: with the sidebar open the
   Bootstrap breakpoints would squeeze list, editor and preview into three columns too early. */
.settings-frontpanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.settings-frontpanel > [class^="frontpanel-col-"] {
  min-width: 0;
}

@container (width >= 992px) {
  .settings-frontpanel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-frontpanel > .frontpanel-col-list {
    grid-column: 1 / -1;
  }
}

@container (width >= 1600px) {
  .settings-frontpanel {
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
  }

  .settings-frontpanel > .frontpanel-col-list {
    grid-column: auto;
  }
}

.frontpanel-page-tabs {
  scrollbar-width: thin;
}

.frontpanel-tile-row,
.frontpanel-key-row {
  min-height: var(--pos-touch-min);
  cursor: grab;
}

.frontpanel-key-row {
  cursor: default;
}

.frontpanel-tile-row.is-dragging {
  opacity: 0.5;
}

.frontpanel-tile-row.is-drop-target {
  outline: 2px dashed var(--bs-primary);
  outline-offset: -2px;
}

.frontpanel-key-hidden .fw-semibold {
  text-decoration: line-through;
  color: var(--cin-text-muted);
}

.frontpanel-tile-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--bs-border-radius);
  background-color: var(--tile-color, var(--pos-tile-placeholder));
  color: var(--tile-ink, var(--cin-text-secondary));
  flex-shrink: 0;
  font-size: 1.1rem;
}

.frontpanel-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.frontpanel-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--pos-touch-min);
}

.frontpanel-swatch-dot {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--tile-color, var(--pos-tile-placeholder));
  border: 1px solid var(--tile-ink, var(--cin-border-secondary));
}

.frontpanel-tile-results {
  max-height: 14rem;
  overflow-y: auto;
}

.frontpanel-tile-results .list-group-item {
  min-height: var(--pos-touch-min);
}

.frontpanel-preview-shell {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 9rem;
  gap: 0.5rem;
  min-height: 22rem;
  container-type: inline-size;
}

.frontpanel-preview-shell[data-sidebar-collapsed="1"] {
  grid-template-columns: 0 minmax(0, 1fr) 9rem;
}

.frontpanel-preview-shell[data-sidebar-collapsed="1"] .frontpanel-preview-sidebar {
  display: none;
}

.frontpanel-preview-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-radius: var(--bs-border-radius);
  background-color: var(--pos-sidebar-bg);
  color: var(--pos-sidebar-color);
}

.frontpanel-preview-main {
  min-width: 0;
}

.frontpanel-preview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.375rem;
}

.frontpanel-preview-grid .article-tile-name {
  font-size: 0.75rem;
  min-height: 0;
}

.frontpanel-preview-grid .article-tile-meta,
.frontpanel-preview-grid .article-tile-price {
  font-size: 0.7rem;
}

.frontpanel-preview-grid .article-tile-add,
.frontpanel-preview-grid .article-tile-info {
  width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
  font-size: 0.75rem;
}

.frontpanel-preview-grid .article-tile-icon {
  font-size: 1.25rem;
}

.frontpanel-preview-cart {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.frontpanel-preview-cart .card-body {
  flex-grow: 1;
}

.frontpanel-preview-cart .pay-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frontpanel-preview-cart .pay-button {
  min-height: 1.75rem;
  font-size: 0.7rem;
  padding: 0.125rem;
}

.frontpanel-preview-cart .function-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.frontpanel-preview-cart .function-button {
  min-height: 1.75rem;
  font-size: 0.6rem;
  padding: 0.125rem;
}

.frontpanel-preview-cart .cart-functions-handle {
  min-height: 1rem;
  margin-bottom: 0.125rem;
  border: 0;
}

.pos-layout-field-off {
  opacity: 0.45;
}

/* ========================================
   P10: operations tab (traffic lights, alerts, backups, load test) and topbar alerts
   ======================================== */

.pos-ops-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.75rem;
}

.pos-ops-check {
  min-height: 2.75rem;
  padding: 0.75rem;
  border: 1px solid var(--cin-border-secondary);
  border-left-width: 4px;
  border-radius: var(--bs-border-radius);
  background-color: var(--cin-surface);
}

.pos-ops-check[data-state="ok"] {
  border-left-color: var(--cin-success);
}

.pos-ops-check[data-state="warning"] {
  border-left-color: var(--cin-warning);
}

.pos-ops-check[data-state="error"] {
  border-left-color: var(--cin-danger);
}

.pos-ops-check[data-state="unavailable"] {
  border-left-color: var(--pos-status-unavailable);
}

.pos-ops-check [data-ops-details] li {
  min-height: 1.5rem;
}

.pos-ops-alert-filter {
  min-width: 9rem;
}

.pos-ops-json {
  max-height: 20rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pos-topbar-alert {
  min-height: 2rem;
}

.pos-topbar-alerts[data-alert-level="critical"] [data-alert-count] {
  box-shadow: 0 0 0 2px var(--cin-danger-light);
}

/* ========================================
   Design adjustment 2026-09-26 (1): price keypad with two fields and one action row
   ======================================== */

/* Two fields above the keys: amount (wider) and quantity; the active field takes the keys. */
.kasse-keypad {
  container-type: inline-size;
}

.kasse-keypad-fields {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 0.75rem;
}

.kasse-keypad-field {
  border: 1px solid var(--cin-border-secondary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kasse-keypad-field .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0.75rem 1rem;
}

.kasse-keypad-field .form-label {
  align-self: flex-start;
}

.kasse-keypad-field .kasse-keypad-input {
  width: 100%;
  max-width: none;
}

.kasse-keypad-field.is-active {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

.kasse-keypad-field[data-keypad-field="quantity"] .kasse-keypad-amount {
  font-size: 1.25rem;
  color: var(--bs-secondary-color);
}

/* The "×" key switches to the quantity field. */
.kasse-view .kasse-keypad-keys .kasse-keypad-switch,
.kasse-keypad-switch {
  font-size: 1.6rem;
}

/* The two actions side by side under the keys (same height as the keys, icon before the label). */
.kasse-keypad-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.kasse-view .kasse-keypad-actions .btn:not(.btn-sm),
.kasse-keypad-actions .btn {
  min-height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

@container (width < 480px) {
  .kasse-keypad-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .kasse-keypad-actions .btn .bi {
    display: none;
  }
}

/* ========================================
   Design adjustment 2026-09-26 (2): cart as receipt preview (positions and total only)
   ======================================== */

/* Receipt look: monospace with tabular figures, dashed line separators like the e-receipt, the
   total under a solid rule. The header (customer, state) and the payment bar stay UI elements. */
.cart-lines,
.cart-summary {
  font-family: var(--bs-font-monospace);
  font-variant-numeric: tabular-nums;
}

.cart-lines-wrap {
  background-color: var(--cin-surface);
}

/* P9 5: width of the register's receipt layout (58 mm = 32, 80 mm = 48 characters plus the line
   padding); a narrower cart column keeps its own width. The tax letter follows showTaxLetter. */
#kasse-cart[data-receipt-width="58"] .cart-lines,
#kasse-cart[data-receipt-width="58"] .cart-summary {
  width: 100%;
  max-width: 36ch;
  margin-inline: auto;
}

#kasse-cart[data-receipt-width="80"] .cart-lines,
#kasse-cart[data-receipt-width="80"] .cart-summary {
  width: 100%;
  max-width: 52ch;
  margin-inline: auto;
}

#kasse-cart[data-receipt-tax-letter="0"] .cart-line-tax {
  display: none;
}

.cart-line {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-height: auto;
  padding: 0.5rem 0.75rem 0.375rem;
  border-bottom: 1px dashed var(--cin-border-secondary);
}

.cart-line-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.cart-line-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.cart-line-total {
  flex: 0 0 auto;
  min-width: 4.5rem;
  text-align: right;
  font-weight: 700;
}

.cart-line-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.cart-line-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0.5rem;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.cart-line-tax {
  letter-spacing: 0.02em;
}

/* Line controls stay on the line (quantity, remove) at the touch minimum. */
.cart-line-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.cart-line-controls .cart-qty-group {
  gap: 0;
}

.cart-line-controls .cart-qty-group .btn {
  width: var(--pos-touch-min);
  height: var(--pos-touch-min);
  min-height: var(--pos-touch-min);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cin-border-secondary);
}

.cart-line-controls .cart-qty {
  min-width: 2.25rem;
  font-family: var(--bs-font-monospace);
}

.cart-line-controls .cart-line-remove {
  min-width: var(--pos-touch-min);
  min-height: var(--pos-touch-min);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Special lines: a deposit line indents under its article without controls; negative lines in red. */
.cart-line.cart-line-child {
  padding-left: 1.75rem !important;
}

.cart-line.cart-line-negative .cart-line-total,
.cart-line.cart-line-negative .cart-line-info {
  color: var(--bs-danger);
}

/* Summary like the receipt foot without tax block: subtotal, tax lines with letter, discount, total. */
.cart-summary {
  border-top: 1px dashed var(--cin-border-secondary) !important;
  padding-top: 0.5rem !important;
}

.cart-summary .cart-tax-line,
.cart-summary > .small {
  line-height: 1.5;
}

.cart-total-row {
  border-top: 1px solid var(--bs-body-color);
  margin-top: 0.375rem !important;
  padding-top: 0.375rem;
}

.cart-total {
  font-size: 1.5rem;
}

.cart-paid-line,
#cart-paid-line {
  border-top: 1px dashed var(--cin-border-secondary);
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

/* ========================================
   S2 master data tabs (Artikel, Kunden)
   ======================================== */

.settings-masterdata .pos-textarea-short {
  min-height: 5rem;
}

/* ERP-owned choice of an ERP row: read-only look (the toggle button is disabled). */
.settings-masterdata .pos-dropdown-locked {
  opacity: 0.65;
  pointer-events: none;
}

.settings-masterdata .pos-import-errors {
  max-height: 14rem;
  overflow-y: auto;
}

.settings-masterdata tbody tr[role="button"] td {
  min-height: var(--pos-touch-min);
}

/* S5/S6: invoice payment and prepayment need a connected ERP; the list stays compact */
body[data-integration-mode="standalone"] .function-button[data-function="documents"] {
  display: none !important;
}

.dlg-documents .documents-list {
  max-height: 16rem;
  overflow-y: auto;
}

.dlg-documents .document-row {
  min-height: 44px;
}

/* Settings › Update: log tail of the host updater (status.json) */
.pos-update-log {
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
}

/* Settings › Artikel: image preview of the editor (ArticleImageService, at most 800 px stored) */
.pos-article-image-preview {
  width: 6rem;
  height: 6rem;
  flex: 0 0 6rem;
  overflow: hidden;
}

.pos-article-image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Completed dialog: print button per sold voucher at touch size */
.pos-completed-voucher .btn {
  min-width: var(--pos-touch-min, 44px);
  min-height: var(--pos-touch-min, 44px);
}