/* ERP: only what Bootstrap does not already cover. */

/*
 * Belegeditor im Bild der Kontaktmaske.
 *
 * Dieselben Regeln stehen dort als <style>-Block im Template; hier liegen sie im
 * Stylesheet, weil ein .tpl durch Smarty läuft und geschweifte Klammern in einem
 * Template als Smarty-Syntax gelesen würden.
 */
.erp-document-edit .card {
  background-color: #ffffff69 !important;
}

[data-bs-theme="dark"] .erp-document-edit .card {
  background-color: #000000 !important;
}

.erp-document-edit .nav-tabs {
  border-bottom-color: var(--bs-border-color) !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  min-height: 39px;
  scrollbar-width: none;
}

.erp-document-edit .nav-tabs::-webkit-scrollbar {
  display: none;
}

.erp-document-edit .nav-tabs .nav-link {
  white-space: nowrap !important;
}

.erp-document-edit .nav-tabs .nav-link.active {
  background-color: var(--cin-surface) !important;
}

.erp-document-edit .form-control,
.erp-document-edit .form-select,
.erp-document-edit .input-group-text {
  background-color: var(--cin-surface) !important;
}

/*
 * Kästchen und Schalter über die Variable statt über background-color: ein
 * direkter Hintergrund würde auch den angehakten Zustand übermalen.
 */
.erp-document-edit .form-check-input {
  --bs-form-check-bg: var(--cin-surface);
}

/*
 * Tabellen und Listen bringen von Bootstrap einen deckenden Hintergrund mit
 * (--bs-table-bg und --bs-list-group-bg zeigen auf --bs-body-bg). Auf der halb
 * durchsichtigen Karte stünde das als sichtbarer Kasten darin.
 */
.erp-document-edit .table {
  --bs-table-bg: transparent;
}

.erp-document-edit .list-group-item {
  background-color: transparent;
}

/* Die schwebende Trefferliste braucht umgekehrt eine deckende Fläche. */
.erp-document-edit [data-erp-doc-contact-results] .list-group-item {
  background-color: var(--cin-surface);
}

.erp-document-avatar {
  width: 56px;
  height: 56px;
  font-size: 1.25rem;
  background: var(--cin-accent-bg, var(--bs-primary-bg-subtle));
  color: var(--cin-accent-text, var(--bs-primary-text-emphasis));
}

/*
 * Der Belegkörper scrollt nur senkrecht. Waagerecht würden die negativen
 * Ränder der .row-Raster sonst einen wenige Pixel breiten Querbalken unter
 * jeder Maske erzeugen. Breite Inhalte scrollen stattdessen in ihrem eigenen
 * Container: die Positionstabelle liegt dafür in einer .table-responsive.
 */
.erp-document-edit .erp-document-body {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Freitexte bleiben flach, bis jemand hineinschreibt. */
.erp-document-edit textarea.erp-textarea,
.erp-stock-form textarea.erp-textarea {
  height: 6rem;
  min-height: 6rem;
}

/* Das Lagerjournal ist eine Chronik: die jüngste Zeile steht oben. */
.erp-view [data-erp-stock-rows] tr:hover {
  background-color: var(--bs-tertiary-bg);
}

.erp-inventory-table input.form-control-sm {
  min-width: 5rem;
}

.erp-view [data-erp-document-rows] tr:hover,
.erp-view [data-erp-article-rows] tr:hover,
.erp-view [data-erp-subscription-rows] tr:hover {
  background-color: var(--bs-tertiary-bg);
}

/* Keep the lookup dropdown of the article form from pushing the layout around. */
.erp-article-form [data-erp-bom-results] {
  max-height: 14rem;
  overflow-y: auto;
}

/*
 * Die Artikel-Trefferliste der Buchungsmaske schwebt über den folgenden Feldern,
 * statt sie bei jedem Tastendruck zu verschieben. Anders als im Belegeditor
 * genügt position: absolute, weil im Buchungs-Modal kein overflow-Container
 * liegt, der die Liste abschneiden würde.
 */
.erp-stock-form [data-erp-stock-article-results] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 14rem;
  overflow-y: auto;
}

/*
 * Schnellzugriff-Widget des Dashboards: die Karte bleibt weiß wie jede andere,
 * nur die Buttons tragen einen dezenten Glasschimmer im CRM-Blau (--bs-primary).
 * Das Dashboard fixiert Widgets auf h × 200px — die Buttons teilen sich deshalb
 * eine Zeile (flex statt fester Breite); reicht die Karte trotzdem nicht,
 * scrollt der Kartenkörper, statt über das Nachbar-Widget zu malen.
 */
.erp-quick-actions .erp-quick-actions-body {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
  min-height: 0;
  overflow-y: auto;
}

.erp-btn-glass {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  flex: 1 1 0;
  min-width: 7rem;
  max-width: 11rem;
  padding: .75rem .5rem;
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .07);
  border: 1px solid rgba(var(--bs-primary-rgb), .22);
  border-radius: .75rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(var(--bs-primary-rgb), .12), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.erp-btn-glass i {
  font-size: 1.6rem;
  line-height: 1;
}

.erp-btn-glass span {
  font-size: .9rem;
}

.erp-btn-glass:hover,
.erp-btn-glass:focus {
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .14);
  border-color: rgba(var(--bs-primary-rgb), .40);
  transform: translateY(-2px);
}

.erp-btn-glass:active {
  transform: translateY(0);
}

/* Gleiche Mechanik für die Artikelsuche im Bestellformular der Beschaffung. */
[data-erp-purchase-article-results] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 14rem;
  overflow-y: auto;
  text-align: left;
}

/*
 * Beide Nachschlagelisten des Belegeditors hängen über dem Inhalt statt darin:
 * im Fluss würden sie die Karte bei jedem Tastendruck auseinanderschieben, und
 * die Artikelliste läge zusätzlich in einer .table-responsive, deren overflow
 * sie abschneiden würde. Über dem Modal-Backdrop (1055).
 *
 * Voraussetzung: kein Vorfahre darf transform, filter oder contain tragen, sonst
 * bezieht sich position: fixed nicht mehr auf den Viewport und die Liste steht
 * versetzt. Das Bootstrap-Modal setzt seinen Dialog im geöffneten Zustand auf
 * transform: none und erfüllt das; während der Einblendung nicht, dann ist aber
 * ohnehin keine Liste offen.
 */
.erp-position-suggestions,
.erp-document-edit [data-erp-doc-contact-results] {
  position: fixed;
  z-index: 1080;
  max-height: 14rem;
  overflow-y: auto;
}

/* Artikelkatalog der Positionserfassung: Kategorien und Treffer scrollen
   jeweils für sich, damit Suche und Baum beim Blättern sichtbar bleiben. */
.erp-article-picker-categories {
  max-height: 12rem;
}

.erp-article-picker-results {
  min-height: 12rem;
  max-height: 50vh;
}

@media (min-width: 768px) {
  .erp-article-picker-categories {
    max-height: 60vh;
  }

  .erp-article-picker-results {
    min-height: 20rem;
    max-height: 55vh;
  }
}

.erp-document-edit .erp-position-table {
  font-size: 0.875rem;
}

.erp-document-edit .erp-position-table td {
  vertical-align: middle;
}

/*
 * Column widths come from the header cells only, so dragging a header edge
 * resizes the column instead of letting the content push it around. The
 * description takes the remaining width; its minimum is enforced through the
 * table min-width, which the editor computes from the stored widths.
 */
.erp-document-edit .erp-position-table {
  table-layout: fixed;
}

.erp-document-edit .erp-position-table thead th {
  position: relative;
}

.erp-document-edit .erp-position-table .erp-col-resize {
  position: absolute;
  top: 0;
  right: -0.25rem;
  bottom: 0;
  z-index: 2;
  width: 0.5rem;
  cursor: col-resize;
  touch-action: none;
}

.erp-document-edit .erp-position-table .erp-col-resize::after {
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: calc(50% - 1px);
  width: 2px;
  content: "";
  background-color: var(--bs-border-color);
  border-radius: 1px;
}

.erp-document-edit .erp-position-table .erp-col-resize:hover::after,
.erp-document-edit .erp-position-table .erp-col-resize.is-active::after {
  background-color: var(--bs-primary);
}

/* A long description grows over the neighbouring cells while it is edited. */
.erp-document-edit .erp-position-table .erp-name-expanded {
  position: relative;
  z-index: 3;
  max-width: none;
  box-shadow: var(--bs-box-shadow-sm);
}

.erp-document-edit .erp-position-table input.form-control-sm {
  min-width: 4rem;
}

/*
 * Component rows of an exploded bill of material stay visually subordinate.
 * Not Bootstraps .table-light: that one is fixed to a light grey with black text
 * and would glare on the dark theme.
 */
.erp-document-edit .erp-position-table tr.erp-row-component td {
  background-color: var(--cin-surface-subtle);
}

/* The description sits in the fourth column (handle+number, type, article number, description). */
.erp-document-edit .erp-position-table tr.erp-row-component td:nth-child(4) {
  padding-left: 1.5rem;
}

/*
 * Blue glass jump-off button of the rental dashboard widget: translucent
 * blue with a blur behind it, readable in light and dark theme.
 */
.btn-glass-blue {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  font: inherit;
  font-weight: 600;
  color: #0a58ca;
  cursor: pointer;
  border: 1px solid rgba(13, 110, 253, 0.35);
  border-radius: 0.5rem;
  background: rgba(13, 110, 253, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(13, 110, 253, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.btn-glass-blue:hover {
  color: #084298;
  background: rgba(13, 110, 253, 0.24);
  box-shadow: 0 6px 18px rgba(13, 110, 253, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

[data-bs-theme="dark"] .btn-glass-blue {
  color: #6ea8fe;
  border-color: rgba(110, 168, 254, 0.4);
  background: rgba(13, 110, 253, 0.2);
}

[data-bs-theme="dark"] .btn-glass-blue:hover {
  color: #9ec5fe;
  background: rgba(13, 110, 253, 0.3);
}

/* Reordering: only the grip starts a drag, the drop row shows a top line. */
.erp-document-edit .erp-position-table .erp-position-drag {
  cursor: grab;
  color: var(--bs-secondary-color);
}

.erp-document-edit .erp-position-table .erp-position-drag:active {
  cursor: grabbing;
}

.erp-document-edit .erp-position-table tr.erp-drop-target td {
  border-top: 2px solid var(--bs-primary);
}

/* Long description editor: fixed height, Quill scrolls internally. */
.erp-article-longdesc.ql-container {
  height: 16rem;
}

/*
 * Buchhaltung / Belegscan (dev/Belegscan.md): Ablagezone, Belegkarten und
 * die Pruefmaske mit Seitenbild, Wort-Overlay, Herkunftsboxen, Gummiband,
 * Popover und Herkunftssymbolen. Farben ueber Bootstrap-Variablen, damit
 * hell und dunkel passen; Touch-Ziele mindestens 44px.
 */
.scan-drop-zone {
  padding: 1.25rem;
  text-align: center;
  color: var(--bs-body-color);
  cursor: pointer;
  border: 2px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease, background-color .15s ease;
}

.scan-drop-zone:hover,
.scan-drop-zone.is-dragover {
  border-color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), .08);
}

.scan-thumb {
  flex-shrink: 0;
  width: 4.5rem;
  height: 6rem;
  object-fit: cover;
  object-position: top;
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .25rem;
}

.scan-card .btn-group .btn,
.scan-actions .btn {
  min-height: 44px;
}

.scan-card .btn-group .btn {
  min-width: 44px;
}

.scan-card-title {
  max-width: 100%;
  color: inherit;
}

.scan-confidence {
  display: inline-flex;
  width: 5rem;
  height: .4rem;
}

/* Betrachter: Seitenleiste links, scrollende Buehne rechts. */
.scan-viewer-body {
  min-height: 24rem;
}

.scan-pages {
  width: 3.5rem;
  overflow-y: auto;
  max-height: calc(100vh - 16rem);
}

.scan-pages .btn {
  min-width: 44px;
  min-height: 44px;
  padding: .25rem;
}

.scan-stage {
  position: relative;
  min-height: 24rem;
  max-height: calc(100vh - 16rem);
  padding: .5rem;
  overflow: auto;
  outline: none;
  background: var(--bs-tertiary-bg);
}

.scan-stage:focus-visible {
  box-shadow: inset 0 0 0 2px var(--bs-primary);
}

.scan-page {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2);
  transform-origin: center center;
}

.scan-page img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Overlay in Bildgroesse; Positionen in Prozent, damit Zoom nichts umrechnet. */
.scan-overlay {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  touch-action: none;
}

.scan-overlay.is-locked {
  pointer-events: none;
  cursor: default;
}

.scan-word {
  position: absolute;
  border-radius: 2px;
}

.scan-word:hover {
  background: rgba(var(--bs-primary-rgb), .15);
}

.scan-word.is-selected {
  background: rgba(var(--bs-primary-rgb), .3);
  outline: 1px solid var(--bs-primary);
}

.scan-field-box {
  --scan-rgb: var(--bs-primary-rgb);
  position: absolute;
  cursor: pointer;
  background: rgba(var(--scan-rgb), .12);
  border: 2px solid rgb(var(--scan-rgb));
  border-radius: 2px;
}

.scan-field-box.is-line {
  border-style: dashed;
}

.scan-field-box.active {
  z-index: 2;
  background: rgba(var(--scan-rgb), .22);
  box-shadow: 0 0 0 3px rgba(var(--scan-rgb), .35);
}

.scan-field-label {
  position: absolute;
  bottom: 100%;
  left: -2px;
  padding: 0 .3rem;
  font-size: .7rem;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  background: rgb(var(--scan-rgb));
  border-radius: 2px 2px 0 0;
  opacity: .9;
}

.scan-rubber {
  position: absolute;
  pointer-events: none;
  background: rgba(var(--bs-primary-rgb), .15);
  border: 1px dashed var(--bs-primary);
}

/* Popover "Uebernehmen als ...": neben der Markierung, unter lg als Bottom-Sheet. */
.scan-popover {
  position: absolute;
  z-index: 5;
  width: min(22rem, calc(100% - 1rem));
  padding: .75rem;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow);
  outline: none;
}

.scan-popover-text {
  max-height: 4.5rem;
  overflow: auto;
  font-family: var(--bs-font-monospace);
  font-size: .85rem;
  word-break: break-word;
}

.scan-popover-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem;
  max-height: 50vh;
  margin-top: .5rem;
  overflow: auto;
}

.scan-popover-item {
  min-height: 44px;
  text-align: left;
}

.scan-popover-item.is-preselected {
  color: #fff;
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Herkunftssymbol rechts im Feld. */
.scan-has-origin .form-control {
  padding-right: 2.5rem;
}

.scan-origin {
  position: absolute;
  top: 50%;
  right: .35rem;
  z-index: 3;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--bs-secondary-color);
  background: transparent;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
}

.scan-origin-total {
  position: static;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: .15rem;
  vertical-align: middle;
  transform: none;
}

.scan-origin:hover,
.scan-origin:focus-visible {
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .1);
  outline: none;
}

.scan-origin.is-manual {
  color: var(--bs-primary);
}

.scan-origin.is-template {
  color: var(--bs-success);
}

.scan-origin.is-ai {
  color: var(--bs-info);
}

.scan-origin.is-invalid {
  color: var(--bs-warning);
}

.scan-origin.is-empty {
  color: var(--bs-tertiary-color);
}

@media (max-width: 991.98px) {

  /* Bild oben, Formular darunter: die Buehne scrollt nicht in sich, damit
     die Seite mit dem Finger neben dem Bild weiterlaeuft. */
  .scan-stage,
  .scan-pages {
    max-height: none;
  }

  .scan-popover {
    position: fixed;
    top: auto !important;
    right: 0;
    bottom: 0;
    left: 0 !important;
    z-index: 1056;
    width: auto;
    max-height: 70vh;
    overflow: auto;
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
  }
}

/*
 * Eingabefelder in Listen (Bestellmenge im Bestellvorschlag und in der
 * Beschaffungsliste): das Material-Layout macht Felder durchsichtig; hier
 * sollen sie als Feld erkennbar sein — weiß im hellen, Kartenfarbe im
 * dunklen Modus, mit vollem Rahmen.
 */
.erp-view .form-control.erp-input-surface {
  background-color: var(--cin-surface, var(--bs-body-bg)) !important;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

/*
 * ERP-Listen mit anpassbaren Spalten (ErpListColumns): ausgeblendete Spalten,
 * Ziehgriff am rechten Rand der Überschrift und der feste Tabellenmodus, in
 * dem die Überschriften allein die Breiten bestimmen. Inhalte brechen um statt
 * abgeschnitten zu werden — Auswahlmenüs in Zellen dürfen nicht verschwinden.
 */
.erp-view table[data-erp-list] .erp-col-hidden {
  display: none !important;
}

.erp-view table[data-erp-list] thead th {
  position: relative;
}

.erp-view table[data-erp-list] .erp-col-resize {
  position: absolute;
  top: 0;
  right: -0.25rem;
  bottom: 0;
  z-index: 2;
  width: 0.5rem;
  cursor: col-resize;
  touch-action: none;
}

.erp-view table[data-erp-list] .erp-col-resize::after {
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: calc(50% - 1px);
  width: 2px;
  content: "";
  background-color: transparent;
  border-radius: 1px;
}

.erp-view table[data-erp-list] thead:hover .erp-col-resize::after {
  background-color: var(--bs-border-color);
}

.erp-view table[data-erp-list] .erp-col-resize:hover::after,
.erp-view table[data-erp-list] .erp-col-resize.is-active::after {
  background-color: var(--bs-primary);
}

.erp-view table.erp-list-fixed td,
.erp-view table.erp-list-fixed th {
  overflow-wrap: anywhere;
}