/* PORTAL_VIEW_ROUTER_STYLES_V1 */
.routeHidden,
.routeLayoutHidden,
.routeColumnHidden,
.navigationUnavailable {
  display: none !important;
}

/*
 * Übersicht:
 * Portal-Layout vollständig ausgeblendet.
 */
body[data-portal-route="dashboardSection"] #dashboardSection {
  display: block;
}

/*
 * Neue Datenbank:
 * Nur die Provisionierungskarte anzeigen.
 */
.portalLayout.routeCreateView {
  display: block;
  max-width: 620px;
}

.portalLayout.routeCreateView .leftColumn {
  width: 100%;
}

.portalLayout.routeCreateView .stickyCard {
  position: static;
}

/*
 * Datenbanken, Audit und Kundenverwaltung:
 * Rechte Spalte nutzt die gesamte verfügbare Breite.
 */
.portalLayout.routeContentView {
  display: block;
}

.portalLayout.routeContentView .rightColumn {
  display: block;
  width: 100%;
}

.portalLayout.routeContentView .rightColumn > .card:not(.routeHidden) {
  width: 100%;
  box-sizing: border-box;
}

/*
 * Keine Scroll-Markierung mehr:
 * Nur die vom Router gesetzte aktive Ansicht ist markiert.
 */
.sidebarLink:not(.active) {
  box-shadow: none;
}

.sidebarLink.active {
  background: rgba(37, 99, 235, 0.28);
  border-color: rgba(96, 165, 250, 0.28);
  box-shadow: inset 3px 0 0 #60a5fa;
}

/*
 * Übersicht auch für Kunden sinnvoll darstellen.
 */
#dashboardSection:not(.routeHidden) {
  margin-bottom: 22px;
}

#adminDashboard:not(.hidden) {
  display: grid;
}

/*
 * Auf kleinen Displays bleiben die Views ebenfalls getrennt.
 */
@media (max-width: 900px) {
  .portalLayout.routeCreateView,
  .portalLayout.routeContentView {
    max-width: none;
    width: 100%;
  }
}