/* ========================================
   CINNEXT WMS - 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). WMS additions follow
   at the end of the file (pick view, cart grid, scan overlay, 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 #wms-overlay-backdrop) */
  --cin-overlay-backdrop: rgba(255, 255, 255, 0.3);

  /* WMS 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 WMS without touching this file; the voucher
     colour is the CIN task-review violet from crm.css */
  --wms-brand-bg: var(--bs-tertiary, #1b3661);
  --wms-voucher: #8b5cf6;
  --wms-voucher-hover: #7c3aed;
  --wms-voucher-active: #6d28d9;
  --wms-tile-placeholder: #e8f0ff;
  --wms-status-unavailable: #9ca3af;
  --wms-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);

  /* WMS tokens: dark sidebar from the CIN surface tokens above, active entry from --bs-primary */
  --wms-brand-bg: var(--cin-bg-tertiary);
  --wms-voucher: #a78bfa;
  --wms-voucher-hover: #8b5cf6;
  --wms-voucher-active: #7c3aed;
  --wms-tile-placeholder: #1a2942;
  --wms-status-unavailable: #6b7280;
  --wms-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(--wms-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;
}

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

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

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

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

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

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

#topbar-account,
#topbar-logout {
  min-height: var(--wms-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 in the CI of CINNext
   Background, borders, item hover and the compact mode come from bs-sidebars.css (identical
   to CINNext). Here only the WMS additions: logo light/dark, product suffix, touch heights,
   pin icons, the personal menu edit mode and the user card.
   ======================================== */

/* CINNEXT GENERATION logo: coloured artwork in light, white artwork in dark mode. */
.wms-logo-dark,
[data-bs-theme="dark"] .wms-logo-light {
  display: none !important;
}

[data-bs-theme="dark"] .wms-logo-dark {
  display: inline-block !important;
}

:root:not([data-bs-theme="dark"]) .sidebar-logo-full .wms-logo-light,
[data-bs-theme="dark"] .sidebar-logo-full .wms-logo-dark {
  display: block !important;
}

.wms-product-suffix {
  align-self: flex-end;
  color: var(--bs-tertiary, #1b3661);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  line-height: 1;
}

[data-bs-theme="dark"] .wms-product-suffix {
  color: var(--cin-foreground);
}

.wms-sidebar-caption {
  color: var(--cin-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

#navigation .sidebar-item-wrapper {
  min-height: var(--wms-touch-min);
  padding: 0.4rem 0.6rem;
  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;
}

/* Pin icon (Als Button in die Kopfleiste heften) like the pins of CINNext. */
#navigation .pin-item {
  color: inherit;
  opacity: 0.45;
  line-height: 1;
  min-width: 1.75rem;
}

#navigation .pin-item:hover,
#navigation .pin-item:focus-visible,
#navigation .pin-item.is-pinned {
  opacity: 1;
}

#navigation .sidebar-item-wrapper:not(.btn-primary) .pin-item.is-pinned {
  color: var(--bs-secondary);
}

/* Compact sidebar: icons only, the pins stay reachable in the expanded menu. */
@media (min-width: 768px) {
  #navigation.is-compact .pin-item {
    display: none !important;
  }
}

/* Personal menu (WmsSidebar): hidden entries, edit mode with move and eye buttons */
#navigation .sidebar-item.is-menu-hidden {
  display: none;
}

#navigation.is-menu-editing .sidebar-item.is-menu-hidden:not(.d-none) {
  display: flex;
  opacity: 0.45;
}

#navigation.is-menu-editing [data-menu] .sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px dashed var(--cin-border-secondary);
  border-radius: var(--bs-border-radius);
  cursor: grab;
}

#navigation.is-menu-editing [data-menu] .sidebar-item.is-dragging {
  opacity: 0.6;
  border-color: var(--bs-primary);
}

#navigation.is-menu-editing [data-menu] .sidebar-item-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  cursor: grab;
}

#navigation.is-menu-editing [data-menu] .pin-item {
  display: none;
}

#navigation .wms-menu-controls {
  display: inline-flex;
  flex-shrink: 0;
}

#navigation .wms-menu-controls .btn {
  color: var(--cin-text-secondary);
  padding: 0.25rem 0.35rem;
  border: 0;
}

#navigation .wms-menu-controls .btn:hover,
#navigation .wms-menu-controls .btn:focus-visible {
  color: var(--bs-primary);
  background-color: var(--cin-surface-hover);
}

#navigation .wms-menu-tools [data-menu-edit] {
  min-height: 2.25rem;
}

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

@media (min-width: 768px) {
  #navigation.is-compact .wms-menu-tools,
  #navigation.is-compact .wms-sidebar-caption,
  #navigation.is-compact .wms-product-suffix {
    display: none !important;
  }

  #navigation.is-compact .wms-sidebar-user {
    justify-content: center;
  }
}

@media (max-width: 767.98px) {
  .wms-sidebar-mobile-bar {
    min-height: 3rem;
    background-color: var(--cin-bg-elevated);
    border-bottom: 1px solid var(--cin-border);
  }

  #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 (#wms-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. */
#wms-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. */
#wms-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 (WMS.note)
   ======================================== */

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

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

@media (max-width: 575.98px) {
  #wms-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: 3.5rem;
  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),
.wms-login .btn:not(.btn-sm),
.wms-install .btn:not(.btn-sm),
.settings-view .btn:not(.btn-sm),
.kasse-view .form-control,
.wms-login .form-control {
  min-height: var(--wms-touch-min);
}

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

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

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

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

/* Login like CINNext: plain card, CINNEXT GENERATION logo in its light/dark artwork. */
.wms-login-brand {
  padding: 0.5rem 0 0;
}

.wms-login-logo {
  height: 4rem;
  max-width: 100%;
  object-fit: contain;
}

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

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

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

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

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

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

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

.wms-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;
}

.wms-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;
}

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

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

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

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

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

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

.wms-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(--wms-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(--wms-status-unavailable) !important;
}

/* ========================================
   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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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


/* ========================================
   WMS: shell after the UI concept (dark sidebar, user card, scan topbar)
   ======================================== */

#navigation .sidebar-item-wrapper {
  min-height: 2.75rem;
  padding-inline: 0.85rem;
  justify-content: flex-start;
}

#navigation .sidebar-item-wrapper.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-color: #fff;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 103, 180, 0.35);
}

.wms-sidebar-divider {
  border-color: var(--cin-border);
  opacity: 1;
  margin: 0.75rem 1rem;
}

.wms-sidebar-user {
  padding: 0.5rem 1rem 0.75rem;
}

.wms-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(var(--bs-primary-rgb), 0.12);
  color: var(--bs-primary);
  font-weight: 600;
}

.wms-online-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--bs-success);
  display: inline-block;
}

[data-connection-state].is-offline .wms-online-dot {
  background: var(--bs-danger);
}

.wms-topbar-scan .form-control,
.wms-topbar-scan .input-group-text,
.wms-topbar-scan .btn {
  min-height: 2.75rem;
}

.wms-topbar-scan {
  max-width: 34rem;
}

/* Page search of the topbar (WmsTopbarSearch): suggestions below the field */
.wms-topbar-suggest {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 1060;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
}

.wms-topbar-suggest-meta {
  max-width: 45%;
}

/* Scan field waiting for input: coloured caret and a pulsing ring, visible from a distance */
.wms-topbar-scan .form-control {
  caret-color: var(--bs-primary);
}

.wms-topbar-scan .wms-scan-group {
  border-radius: var(--bs-border-radius);
}

.wms-topbar-scan .wms-scan-group:focus-within {
  animation: wms-scan-pulse 1.1s ease-in-out infinite;
}

.wms-topbar-scan .wms-scan-group:focus-within .form-control,
.wms-topbar-scan .wms-scan-group:focus-within .input-group-text {
  border-color: var(--bs-primary);
}

@keyframes wms-scan-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.7);
  }

  50% {
    box-shadow: 0 0 0 0.4rem rgba(var(--bs-primary-rgb), 0.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wms-topbar-scan .wms-scan-group:focus-within {
    animation: none;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.5);
  }
}

.wms-bell-menu {
  min-width: 18rem;
  max-height: 60vh;
  overflow-y: auto;
}

/* ========================================
   WMS: scan error overlay (wmsprojekt.md 23)
   ======================================== */

.wms-scan-alert {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(127, 0, 0, 0.55);
}

.wms-scan-alert-card {
  width: min(36rem, 100%);
  border: 4px solid var(--bs-danger);
}

/* ========================================
   WMS: work views (pick, cart) - large, high contrast, few interactions
   ======================================== */

.wms-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
}

.wms-card-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.wms-pick-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 1.1fr) minmax(20rem, 1.3fr) minmax(16rem, 0.9fr);
  gap: 1rem;
  flex: 1 1 auto;
  min-height: 0;
}

@container (max-width: 1100px) {
  .wms-pick-grid {
    grid-template-columns: 1fr 1fr;
  }
  .wms-pick-grid > .wms-pick-target {
    grid-column: 1 / -1;
  }
}

@container (max-width: 720px) {
  .wms-pick-grid {
    grid-template-columns: 1fr;
  }
  .wms-pick-grid > .wms-pick-list {
    order: 3;
  }
}

.wms-task-row {
  display: grid;
  grid-template-columns: 2rem 3rem 1fr auto 1.75rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  min-height: 3.75rem;
  cursor: pointer;
  background: var(--bs-body-bg);
}

.wms-task-row.is-current {
  border-color: var(--bs-primary);
  border-left-width: 4px;
  background: rgba(0, 103, 180, 0.06);
}

.wms-task-row.is-done .wms-task-check {
  color: var(--bs-success);
}

.wms-task-thumb,
.wms-article-image {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  border-radius: 0.375rem;
  background: var(--bs-tertiary-bg);
}

.wms-article-image {
  width: 100%;
  height: 12rem;
}

.wms-task-check {
  font-size: 1.35rem;
  color: var(--bs-secondary-color);
}

.wms-big-location {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.wms-big-article {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600;
}

.wms-qty-stepper {
  display: grid;
  grid-template-columns: 4rem 1fr 4rem;
  gap: 0.5rem;
  align-items: stretch;
}

.wms-qty-stepper .btn {
  min-height: 3.5rem;
  font-size: 1.6rem;
}

.wms-qty-value {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.wms-qty-value.is-complete {
  border-color: var(--bs-success);
  color: var(--bs-success);
}

.wms-btn-xl {
  min-height: 3.5rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.wms-path-tile {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  min-width: 0;
}

.wms-path-tile .value {
  font-size: 1.35rem;
  font-weight: 700;
}

.wms-location-visual {
  position: relative;
  border-radius: 0.5rem;
  min-height: 8rem;
  background: repeating-linear-gradient(90deg, #f4b400 0 10px, #2b3a55 10px 26px), #2b3a55;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem;
  overflow: hidden;
}

.wms-location-label {
  background: #fff;
  color: #111;
  border-radius: 0.375rem;
  padding: 0.5rem 0.9rem;
  font-weight: 700;
  font-size: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.wms-box-visual {
  font-size: 3rem;
  color: var(--bs-primary);
}

.wms-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: var(--bs-body-bg);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

.wms-actionbar .btn {
  min-height: 3.25rem;
  padding-inline: 1.25rem;
}

/* Rolling picking: cart grid (wmsprojekt.md 21) */
.wms-cart-grid {
  display: grid;
  grid-template-columns: repeat(var(--wms-cart-columns, 3), minmax(0, 1fr));
  gap: 0.75rem;
}

.wms-cart-slot {
  border: 2px solid var(--bs-border-color);
  border-radius: 0.6rem;
  padding: 0.75rem;
  min-height: 6.5rem;
  background: var(--bs-body-bg);
}

.wms-cart-slot.is-target {
  border-color: var(--bs-primary);
  background: rgba(0, 103, 180, 0.12);
  box-shadow: 0 0 0 4px rgba(0, 103, 180, 0.25);
  animation: wms-pulse 1.4s ease-in-out infinite;
}

.wms-cart-slot.is-done {
  border-color: var(--bs-success);
}

.wms-cart-slot .slot-qty {
  font-size: 2rem;
  font-weight: 700;
  color: var(--bs-primary);
}

@keyframes wms-pulse {
  50% {
    box-shadow: 0 0 0 8px rgba(0, 103, 180, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wms-cart-slot.is-target {
    animation: none;
  }
}

/* Dashboard tiles and charts */
.wms-kpi {
  border-radius: 0.75rem;
  padding: 1rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  height: 100%;
}

.wms-kpi .value {
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.wms-kpi .label {
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}

.wms-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 8rem;
}

.wms-bars .bar {
  flex: 1 1 0;
  background: var(--bs-primary);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  opacity: 0.85;
}

.wms-table td,
.wms-table th {
  vertical-align: middle;
}

.wms-table tbody tr {
  height: 3rem;
}

.wms-clickable {
  cursor: pointer;
}

.wms-choice .dropdown-toggle {
  min-height: 2.75rem;
  text-align: left;
}

/* Compact choice inside dense tables (Lagereinrichtung). */
.wms-choice-sm .dropdown-toggle {
  min-height: 2rem;
  padding: .2rem .6rem;
  font-size: .875rem;
}

.wms-choice-sm .dropdown-menu {
  max-height: 18rem;
  overflow-y: auto;
}

.wms-token {
  font-family: var(--bs-font-monospace);
  word-break: break-all;
}

/* Brand head of the sidebar stays visible on desktop (Bootstrap hides offcanvas headers from md). */
@media (min-width: 768px) {
  #navigation .offcanvas-md .offcanvas-header {
    display: flex;
  }
}

.wms-big-location {
  white-space: nowrap;
}

.wms-big-location-sm {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}

.wms-scan-field {
  min-height: 2.75rem;
}

/* ---------------------------------------------------------------- Picklisten-Warteschleife */
/* Benutzer anlegen: CINNEXT accounts to choose from */
.wms-account-picker {
  max-height: 18rem;
  overflow-y: auto;
}

/* Pick & Warenausgang, tab Picken: chosen pick list on the left */
.wms-picklist-nav {
  max-height: 22rem;
  overflow-y: auto;
}

.wms-picklist-nav .list-group-item {
  cursor: pointer;
}

.wms-picklist-nav .list-group-item.is-selected {
  background-color: var(--bs-primary-bg-subtle);
  box-shadow: inset 4px 0 0 var(--bs-primary);
}

.wms-queue-entry {
  border-left: 0.4rem solid var(--wms-queue-color, var(--bs-border-color));
}

.wms-queue-sort {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: var(--bs-tertiary-bg);
  font-weight: 700;
  font-size: 1.1rem;
}

.wms-color-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  vertical-align: middle;
}

/* Compact sidebar: the round mark replaces the logo. */
#navigation.is-compact .wms-brand-compact {
  display: inline-block;
}

/* ---------------------------------------------------------------- Mobile Shell (/mobil) */
.wms-mobile .wms-mobile-bar {
  background: var(--cin-bg-elevated);
  color: var(--cin-foreground);
  border-bottom: 1px solid var(--cin-border);
  box-shadow: var(--cin-shadow-sm);
  padding-top: env(safe-area-inset-top);
  z-index: 10;
}

.wms-mobile-logo {
  height: 1.9rem;
  width: auto;
}

.wms-mobile-title {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.wms-mobile-bar-btn {
  color: var(--bs-primary);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
}

.wms-mobile-bar-btn:hover,
.wms-mobile-bar-btn:focus {
  color: var(--bs-primary);
  background: var(--cin-surface-hover);
}

.wms-mobile .wms-online-dot.is-offline {
  background: var(--bs-danger);
}

.wms-mobile-main {
  max-width: 44rem;
  width: 100%;
  margin: 0 auto;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

.wms-mobile-card {
  border-radius: 0.9rem;
  box-shadow: var(--bs-box-shadow-sm);
}

.wms-mobile-menu-btn {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  min-height: 4.5rem;
  border-radius: 0.9rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-sm);
  color: inherit;
  text-decoration: none;
}

.wms-mobile-menu-btn:active {
  background: var(--bs-tertiary-bg);
}

.wms-mobile-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.7rem;
  background: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
  font-size: 1.45rem;
}

.wms-avatar-light {
  background: var(--wms-brand-bg);
}

.wms-mobile-bin {
  font-family: var(--bs-font-monospace);
  font-weight: 700;
  color: var(--bs-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.wms-mobile-image {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 0.6rem;
  background: var(--bs-tertiary-bg);
}

.wms-mobile-location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: var(--wms-brand-bg);
  color: #fff;
  font-family: var(--bs-font-monospace);
  font-weight: 800;
  font-size: clamp(1.8rem, 9vw, 2.6rem);
  letter-spacing: 0.04em;
}

.wms-mobile-location .bi {
  color: #ff9900;
  font-size: 0.7em;
}

.wms-mobile-qty {
  display: grid;
  grid-template-columns: 4rem 1fr 4rem;
  align-items: center;
  gap: 0.75rem;
}

.wms-mobile-qty .btn {
  height: 4rem;
  font-size: 1.6rem;
  border-radius: 0.8rem;
}

.wms-mobile-qty-value {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
}

.wms-mobile-qty-value.is-complete {
  color: var(--bs-success);
}

.wms-mobile-stepper .btn {
  min-width: 3.5rem;
}

.wms-mobile-actions {
  position: sticky;
  bottom: 0;
  padding: 0.5rem 0 0.25rem;
  background: linear-gradient(to bottom, transparent, var(--bs-body-bg) 25%);
}

.wms-mobile-actions .btn-lg {
  min-height: 3.6rem;
}

.wms-mobile-template {
  border-left: 0.4rem solid var(--wms-queue-color, var(--bs-border-color)) !important;
}

.wms-mobile-template-dot {
  display: none;
}

.wms-mobile-line .wms-task-thumb {
  flex-shrink: 0;
}

/* Camera scan overlay (BarcodeDetector) */
.wms-camera {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #000;
}

.wms-camera video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wms-camera-frame {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 35%;
  height: 22%;
  border: 3px solid #ff9900;
  border-radius: 0.75rem;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
}

.wms-camera-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem calc(1rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) 1rem;
  background: rgba(0, 0, 0, 0.55);
}

body.wms-mobile .wms-mobile-bar .form-control {
  background: var(--cin-surface-subtle);
  color: var(--bs-body-color);
  border: 0;
  border-radius: 0.6rem;
  padding-left: 0.85rem;
}

.wms-mobile-bar .input-group > .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.wms-mobile-bar .input-group > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid var(--bs-border-color);
}

/* Quantity stepper: the material layout renders buttons inside input groups transparent. */
body .wms-mobile-stepper > .btn.btn-primary {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  border-radius: 0.6rem;
}

body .wms-mobile-stepper > .form-control {
  font-size: 1.4rem;
}

/* ---------------------------------------------------------------- Topbar wie CINNext
   Links die Karte mit Scanfeld, Hinweisen und Profilmenü, rechts die angehefteten Menüpunkte als
   große Touch-Buttons (WmsSidebar, users/preferences pins). */
.wms-topbar-pins {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.wms-pin-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  min-width: 3.25rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--bs-border-radius-lg);
  font-weight: 600;
  font-size: 1rem;
  box-shadow: var(--cin-shadow-xs);
}

/* Colours only through the button variables of Bootstrap: the pin of the open page keeps the
   colours of .btn-primary (white on primary) in every state, the others are elevated cards. */
.wms-pin-button:not(.btn-primary) {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--cin-bg-elevated);
  --bs-btn-border-color: var(--cin-border);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--cin-surface-hover);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--bs-primary);
  --bs-btn-active-bg: var(--cin-surface-hover);
  --bs-btn-active-border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .wms-pin-button:not(.btn-primary) {
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.35);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 0.45);
}

.wms-pin-button:not(.btn-primary):focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.wms-pin-button .bi {
  font-size: 1.4rem;
  line-height: 1;
}

.wms-pin-button.btn-primary {
  box-shadow: var(--cin-shadow-sm);
}

@media (max-width: 991.98px) {
  .wms-topbar-pins {
    width: 100%;
  }

  .wms-pin-button {
    flex: 1 1 0;
    justify-content: center;
    padding: 0.5rem 0.6rem;
  }
}

@media (max-width: 575.98px) {
  /* On phones the icon carries the button; the label would wrap. */
  .wms-pin-button span {
    display: none;
  }
}

.wms-topbar-card {
  min-width: 0;
}

.wms-topbar-card [data-topbar-actions] .wms-topbar-icon,
.wms-profile-button {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wms-profile-status {
  position: absolute;
  right: -0.1rem;
  bottom: -0.1rem;
  display: inline-flex;
  padding: 0.12rem;
  border-radius: 50%;
  background: var(--cin-bg-elevated);
}

.wms-profile-status .wms-online-dot {
  width: 0.55rem;
  height: 0.55rem;
}

.wms-profile-status.is-offline .wms-online-dot {
  background: var(--bs-danger);
}

@media (min-width: 992px) {
  .wms-topbar-card {
    width: min(44rem, 60vw);
  }

  /* With pinned buttons the scan card on the left gets narrower, so up to three pins stay in one
     row on the right. */

  .wms-topbar:has(.wms-topbar-pins:not(.d-none)) .wms-topbar-card {
    width: min(30rem, 40vw);
  }

  /* The pins stay in one row; when the free width does not hold all labels, only the icons are
     shown (the name stays in the tooltip). */
  .wms-topbar-pins-area {
    container-type: inline-size;
  }

  .wms-topbar-pins {
    flex-wrap: nowrap;
  }
}

@container (max-width: 15rem) {
  .wms-topbar-pins .wms-pin-button span {
    display: none;
  }
}

@container (max-width: 27rem) {
  .wms-topbar-pins:has(> :nth-child(2)) .wms-pin-button span {
    display: none;
  }
}

@container (max-width: 38rem) {
  .wms-topbar-pins:has(> :nth-child(3)) .wms-pin-button span {
    display: none;
  }
}

@container (max-width: 50rem) {
  .wms-topbar-pins:has(> :nth-child(4)) .wms-pin-button span {
    display: none;
  }
}