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

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

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

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