/*
 * Gemeinsamer Look fuer base.html und customer_base.html: Kopfzeile, Sidebar,
 * Seitenkopf und Tabellen-Aktionen. Nur Optik, keine Selektoren, an denen JS haengt.
 */

:root {
  --app-border: #e3e6ea;
  --app-muted-bg: #f6f7f9;
  --app-header-height: 3.5rem;
}

body {
  background: #fff;
}

/* Inline-SVGs aus Bootstrap Icons (z.B. Cookie-Zweck) an die Textzeile anpassen */
.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

/* ---------------------------------------------------------------- Kopfzeile */

.app-header {
  min-height: var(--app-header-height);
  background: #fff;
  border-bottom: 1px solid var(--app-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.app-brand {
  font-weight: 600;
  letter-spacing: .01em;
  color: #212529;
  text-decoration: none;
}

.app-brand:hover {
  color: #0d6efd;
}

.app-header-meta {
  font-size: .875rem;
  color: #495057;
}

.app-header-meta .app-meta-label {
  color: #6c757d;
  margin-right: .25rem;
}

.app-header-meta .app-meta-item + .app-meta-item {
  border-left: 1px solid var(--app-border);
  padding-left: 1rem;
  margin-left: 1rem;
}

.app-header .app-header-link {
  color: #495057;
  text-decoration: none;
}

.app-header .app-header-link:hover {
  color: #0d6efd;
  text-decoration: underline;
}

/* ------------------------------------------------------------------ Sidebar */

.app-sidebar {
  background: var(--app-muted-bg);
  border-right: 1px solid var(--app-border);
}

@media (min-width: 768px) {
  .app-sidebar {
    min-height: calc(100vh - var(--app-header-height));
  }
}

.app-sidebar .sidebar-heading {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6c757d;
  padding: 0 1.25rem;
  margin: 1.5rem 0 .4rem;
}

.app-sidebar .nav-link {
  color: #343a40;
  border-radius: .375rem;
  padding: .45rem .75rem;
  margin: 0 .5rem .15rem;
}

.app-sidebar .nav-link:hover {
  background: #eceff3;
}

.app-sidebar .nav-link.active {
  background: #e7f1ff;
  color: #0b5ed7;
  font-weight: 600;
}

/* ---------------------------------------------------------------- Seitenkopf */

.app-page-header {
  border-bottom: 1px solid var(--app-border);
}

.app-page-header h1 {
  font-size: 1.6rem;
  font-weight: 500;
}

/* ---------------------------------------------- Formulare aus form.as_p */

.app-form-p > p {
  margin-bottom: 1rem;
}

.app-form-p > p > label {
  display: block;
  font-weight: 600;
  margin-bottom: .35rem;
}

.app-form-p .helptext {
  display: block;
  font-size: .875em;
  color: #6c757d;
  margin-top: .25rem;
}

/* ----------------------------------------------------------------- Tabellen */

.app-table-card .card-body {
  padding: 1rem 1.25rem;
}

.app-table-card table.table {
  margin-bottom: 0;
}

.table-actions {
  white-space: nowrap;
}

.table-actions .btn {
  margin: 0 .2rem .2rem 0;
}

/* Mehrere Aktionen als 2er-Raster statt einer endlos breiten Zeile */
.table-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
  min-width: 15rem;
}

.table-actions-grid .btn {
  margin: 0;
}

.table .app-col-wide {
  min-width: 14rem;
}

.table .app-col-medium {
  min-width: 9rem;
}

.table .app-subtle {
  color: #6c757d;
  font-size: .85rem;
}

/* Lange DSE-Texte scrollen im Editor, statt den Baustein endlos zu verlaengern.
   Gilt fuer die Text- und die HTML-Ansicht von Trumbowyg (auch mit autogrow). */
.trumbowyg-box .trumbowyg-editor,
.trumbowyg-box .trumbowyg-textarea {
  max-height: 60vh;
  overflow-y: auto;
}