/* Allgemeine Stile */
.login-container {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}
h2 {
    margin-bottom: 20px;
}

/* Stile für das Dashboard */
.dashboard-container {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 400px;
    margin: 0 auto;
    text-align: center;
    margin-top: 100px;
}
 .error {    
	border: 1px solid red;
    background-color: #fdd;
        }
 .form-container {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px; 
}
.form-group label {
   margin-right: 10px;
}
.form-group {
    margin-right: 15px; 
    flex-grow: 1; 
    margin-bottom: 15px;
}
.form-group_a_show {
    display: inline-block;
    margin-right: 15px; 
}
.form-group_a_show label {
    margin-right: 10px; 
}
.form-group_a_show select {
    margin-right: 10px; 
}
/* Optional: Stil für die Fehlermeldungen */
.error-message {
    color: red;
    font-size: 12px;
    margin-left: 5px; 
}
.fixed-window {
            position: fixed;
            top: 20%;
            left: 30%;
            width: 40%;
            background: #fff;
            border: 1px solid #ccc;
            padding: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
}
.details-popup {
    position: absolute;
    top: 50px;
    left: 50px;
    border: 1px solid #ccc;
    background: #fff;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.details-popup table {
    width: 100%;
    border-collapse: collapse;
}

.details-popup table th, .details-popup table td {
    border: 1px solid #ddd;
    padding: 5px;
}

.rezeptur-name {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}
#artikelContainer {
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
}

.artikelRow {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.artikelRow input {
    flex: 1;
}

    .checkbox-inline-group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px; /* Abstand zwischen den Checkboxen */
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
        max-width: 100%;
    }

    /* Stil für einzelne Checkboxen */
    .checkbox-inline {
        display: flex;
        align-items: center;
        padding: 5px;
        font-size: 14px;
    }

    .checkbox-inline input {
        margin-right: 5px;
    }
.artikel {
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen den Elementen */
    margin-bottom: 10px; /* Abstand zwischen den Zeilen */
}

.artikel label {
    margin-right: 5px;
}

.artikel input[type="text"],
.artikel input[type="number"] {
    width: 150px; /* Breite der Eingabefelder */
    padding: 5px;
}

/*CSS - fixes Design nur was drunter ist. Alles andere ist Testumgebung */
/* Grundeinstellungen */
		body {
			font-family: Arial, sans-serif;
			background-color: #f4f4f4;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			margin: 0;
		}
		.container {
			display: flex;
			flex-direction: row;
			height: 100%; 
			width: 100%;
		}
		.menu {
			flex: 0,5; 
			background-color: #f9f9f9;
			color: #ccc;
			padding: 20px;
			border-right: 1px solid #333;
		}
		.main-content {
			flex: 2;
			padding: 20px;
			background-color: #f9f9f9;
			overflow-y: auto; 
		}
		.dropdown-container {
			display: flex;
			gap: 20px; 
			align-items: center; 
		}

		.dropdown-container label {
			margin-right: 5px; 
		}

/*Linkeigenschaften */
		a {
			display: inline-block;
			margin-top: 20px;
			color: #333;
			text-decoration: none;
			background-color: #f4f4f4;
			padding: 10px 20px;
			border-radius: 4px;
			border: 1px solid #ccc;
		}

		a:hover {
			background-color: #ddd;
		}
		
/* Menu */
		.menu h2 {
			margin-top: 0;
			text-align: center;
		}

		.menu ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.menu ul > li {
			margin-bottom: 5px;
		}
		.menu ul > li > strong {
			display: block;
			font-size: 1.2em;
			margin-bottom: 5px;
			color: #333;
		}
		.menu ul > li:last-child {
			margin-bottom: 20px; 
		}
		.menu ul li a {
			text-decoration: none;
			color: #636363;
			background-color: transparent;
			padding: 0;
			border: none;
			border-radius: 0;
		}
		.menu ul li a:hover {
			text-decoration: underline;
		}
		.menu ul li ul {
			padding-left: 20px;
		}
		.menu ul li ul li {
			margin-bottom: 5px;
		}
		
/* Formulare Standard*/
		input[type="text"], input[type="password"], select, input[type="date"] {
			display: block;
			
			margin-bottom: 10px;		
			width: 200px; 
			height: 30px; 
			font-size: 16px; 
			padding: 5px; 
			background-color: #FFF ;
			border: 1px solid #888;
			box-sizing: border-box;	
			-moz-appearance: textfield; /* Firefox */
			-webkit-appearance: textfield; /* Chrome und Safari */
			appearance: textfield; /* Standard */
			transition: border-color 0.3s; 
		}
		input.error {
			border-color: red; 
		}
		label {
			padding: 5px;		
			-moz-appearance: textfield; /* Firefox */
			-webkit-appearance: textfield; /* Chrome und Safari */
			appearance: textfield; /* Standard */
			transition: border-color 0.3s; /* Sanfter Übergang der Randfarbe */
		}
		button {
			
			padding: 10px;
			background-color: #333;
			color: white;
			border: none;
			border-radius: 4px;
		}
		button:hover {
			background-color: #555;
		}

		.tooltip {
		  visibility: hidden;
		  opacity: 0;
		  background-color: #ffea9d;
		  color: #888;
		  position: absolute;
		  z-index: 10;
		  padding: 2px;
		  transition: opacity 0.3s ease;
		  border: 1px solid #888;
		}

		label:hover .tooltip, input:hover + .tooltip {
		  visibility: visible;
		  opacity: 1;
		}
/*AutocompleteCOntainer für Wareneingang*/
.autocomplete-dropdown li {
    padding: 5px;
    cursor: pointer;
}

.autocomplete-dropdown li:hover,
.autocomplete-dropdown li.active {
    background-color: #007bff;
    color: white;
}
/*Scanner-Handler*/
#scanner-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#scanner-video {
    width: 100%;
    max-width: 640px;
    border: 5px solid red; /* Auffälliger Rahmen zur Sichtbarmachung */
}

#start-scanner, #scan-result {
    position: relative;
    z-index: 1001; /* Stelle sicher, dass diese Elemente über dem Video liegen */
}


/*Flexible tagboxen */
		.autocomplete-container {
			position: relative; /* Wichtige Positionierung, damit das Dropdown korrekt angezeigt wird */
			width: 100%; /* Optional: Wenn du möchtest, dass es 100% der Breite einnimmt */
			border-color: #000;
		}
		.ul_input-field {
			position: absolute;
			top: 100%; 
			left: 0;
			width: 100%;
			max-height: 200px; 
			overflow-y: auto; 
			background-color: white;
			border: 1px solid #ccc;
			border-top: none; 
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
			z-index: 9999; 
			display: none;
			list-style: none;	 
		}
		.ul_input-field li {
			padding: 8px;
			cursor: pointer;
		}
		.ul_input-field li:hover {
			background-color: #f0f0f0;
		}

		.input-field {
		  display: flex; 
		  flex-wrap: wrap; 
		  gap: 5px; 
		  align-items: center; 
		  padding: 5px; 
		  border: 1px solid #888; 
		  background-color: #FFF; 
		  width: 200px; 
		  height: auto; 
		  min-height: 30px; 
		  box-sizing: border-box; 
		  position: relative;
		  overflow: visible; 
		}

		.tag {
		  padding: 5px 10px; 
		  background-color: #f0f0f0; 
		  border: 1px solid #ccc; 
		  border-radius: 3px; 
		  display: inline-flex; 
		  align-items: center; 
		  gap: 5px; 
		  margin: 0; 
		}

		.tag .remove-option {		  
		  color: red; 
		  font-weight: bold; 
		}

		.placeholder {
		  flex-grow: 1; 
		  min-width: 50px; 
		  outline: none; 
		  border: none; 
		  background: none; 
		}
	
		#dropdown li {
		  cursor: pointer;
		  padding: 5px;
		}

		#dropdown li:hover {
		  background-color: #f0f0f0;
		}

/* Tabelleneigenschaften */
		table {
			width: 100%;
			border-collapse: collapse;
		}
		th, td {
			padding: 10px;
			text-align: left;
			border: 1px solid #ddd;
			vertical-align: top; 
		}
		th {
		   background-color: #f2f2f2;
		}
		tr:nth-child(even) {
		   background-color: #f9f9f9;
		}
		tr:hover {
		   background-color: #e2e2e2;
		}
		#auswertungContainer
		{
		  display: flex;
		  flex-wrap: wrap;
		  gap: 1rem; 
		}

		.table-wrapper {
		  flex: 1 1 30%; 
		  min-width: 33%;
		  max-width: 100%;
		  box-sizing: border-box;
		}
		.table-wrapper table {
		  width: 100%;
		  max-width: 100%;
		}
		#feedback-popup {
		  position: fixed;
		  top: 20px;
		  left: 50%;
		  transform: translateX(-50%);
		  background-color: green;
		  color: white;
		  padding: 12px 24px;
		  border-radius: 8px;
		  font-weight: bold;
		  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
		  z-index: 9999;
		  display: none;
		}

/* Popups Artikel_details */
		#overlay {
		  position: fixed;
		  inset: 0;
		  display: flex;
		  justify-content: center;
		  align-items: flex-start;
		  padding: 2rem;
		  background: rgba(0, 0, 0, 0.5);
		  overflow-y: auto;
		  z-index: 1000;
		  box-sizing: border-box;
		}


		#overlay::after {
		  content: '';
		  display: block;
		  height: 3px;
		  background: #ccc;
		  margin-top: 20px;
		  border-radius: 2px;
		}

		#overlay-content {
		  display: inline-block;
		  background: white;
		  padding: 1.5rem;
		  border-radius: 8px;
		  box-shadow: 0 0 10px rgba(0,0,0,0.3);
		  min-width: max-content;  
		  max-width: 95vw;          
		  box-sizing: border-box;
		}

		#overlay-content h2 {
		  margin-top: 0;
		}
		#tooltip {
		  position: absolute;
		  display: none;
		  background-color: #333;
		  color: #fff;
		  padding: 6px 8px;
		  border-radius: 6px;
		  font-size: 0.9em;
		  pointer-events: none;
		  z-index: 1101;
		  max-width: 300px;
		  line-height: 1.4;
		}

		#overlay-close {
		  position: absolute;
		  top: 10px;
		  right: 10px;
		  cursor: pointer;
		  font-size: 20px;
		  background: none;
		  border: none;
		  color: red;
		}
		#artikelListe {
		  display: flex;
		  flex-direction: column; 
		}

		.artikel-row {
		  
		  margin-bottom: 10px; 
		}

		.artikel-cell {
		  flex: 1; 
		  padding: 8px;
		  border: 1px solid #ddd;
		}
		#artikelDetailOverlay {
		  position: fixed;
		  inset: 0;
		  display: none;
		  justify-content: center;
		  align-items: flex-start;
		  background: rgba(0,0,0,0.5);
		  overflow-y: auto;
		  padding: 2rem;
		  z-index: 1100;
		}
		#artikel-detail-overlay-content {
		  display: inline-block;
		  background: white;
		  padding: 1.5rem;
		  border-radius: 8px;
		  box-shadow: 0 0 10px rgba(0,0,0,0.3);
		  min-width: max-content;  
		  max-width: 95vw;          
		  box-sizing: border-box;
		}

		#artikel-detail-overlay-content h2 {
		  margin-top: 0;
		}
		.detail-form {
		  max-width: 700px;
		  margin: 2rem auto;
		  display: flex;
		  flex-wrap: wrap;
		  gap: 1rem 2rem;
		}

		.detail-form .form-group {
		  flex: 1 1 45%; 
		  display: flex;
		  flex-direction: column;
		  box-sizing: border-box; 
		  margin: 0.5%; 
		}

		.detail-form label {
		  font-weight: 600;
		  margin-bottom: 0.3rem;
		  color: #333;
		}

		.detail-form input,
		.detail-form select {
		  padding: 0.4rem;
		  font-size: 1rem;
		  border-radius: 4px;
		  border: 1px solid #ccc;
		}

		.detail-form input[type="checkbox"] {
		  width: auto;
		  transform: scale(1.2);
		}


		.artikel-cell input {
		  width: 100px;
		  padding: 5px;
		}

		#artikel-details {
		  display: flex;
		  flex-direction: row;
		  width: 100%;
		}

		#artikel-details-left {
		  flex: 1; 
		  background-color: #f9f9f9;
		  padding: 20px;
		}

		.artikel-details-right {
		  flex: 1;
		  padding: 20px;
		  background-color: #f9f9f9;
		  overflow-y: auto; 
		}

		button.overlay {
		  background-color: #333;
		  color: white;
		  border: none;
		  border-radius: 4px;
		}

		.artikel-kopf {
		  display: flex; 
		  align-items: center;
		  width: 100%;
		}
		.artikel-kopf .button-group {
		  margin-left: auto;
		}
		.container .button-group {
		  margin-left: auto; 
		}

		#rezeptform {
		  display: flex;
		  flex-direction: column;
		  width: 100%;
		  background-color: #f9f9f9;
		}

		.rezept-details {
		  display: flex;
		  flex-direction: row; 
		}
		
		  .hidden {
		  display: none;
		}
		#artikelNeuOverlay {
		  position: fixed;
		  inset: 0;
		  display: none;
		  justify-content: center;
		  align-items: flex-start;
		  background: rgba(0,0,0,0.5);
		  overflow-y: auto;
		  padding: 2rem;
		  z-index: 1100;
		}
		#artikel-neu-overlay-content {
		  display: inline-block;
		  background: white;
		  padding: 1.5rem;
		  border-radius: 8px;
		  box-shadow: 0 0 10px rgba(0,0,0,0.3);
		  min-width: max-content;  
		  max-width: 95vw;          
		  box-sizing: border-box;
		}

		#artikel-neu-overlay-content h2 {
		  margin-top: 0;
		}
		.artikel-row.scanner-hit {
		background-color: #d4edda !important;
		transition: background-color 0.5s;
		}

		/* Vater-Kind-Artikel CSS */
		.vater-kind-section {
		  margin-top: 20px;
		  padding: 15px;
		  border: 1px solid #e0e0e0;
		  border-radius: 5px;
		  background-color: #f9f9f9;
		}

		.vater-kind-section h4 {
		  margin-top: 0;
		  margin-bottom: 15px;
		  color: #333;
		  border-bottom: 1px solid #ddd;
		  padding-bottom: 5px;
		}

		.vater-kind-erklaerung {
		  background-color: #e8f4fd;
		  padding: 8px 12px;
		  border-radius: 4px;
		  margin-bottom: 15px;
		  border-left: 4px solid #007bff;
		}

		.kind-artikel-hinweis {
		  background-color: #fff3cd;
		  padding: 8px 12px;
		  border-radius: 4px;
		  margin-top: 10px;
		  border-left: 4px solid #ffc107;
		}

		.vater-werden-info {
		  background-color: #d4edda;
		  padding: 12px;
		  border-radius: 4px;
		  margin-bottom: 10px;
		  border-left: 4px solid #28a745;
		}

		.vater-werden-info p {
		  margin: 0 0 5px 0;
		}

		.konzept-erklaerung {
		  margin-bottom: 20px;
		}

		.info-box {
		  background-color: #e8f5e8;
		  padding: 15px;
		  border-radius: 5px;
		  border: 1px solid #c3e6c3;
		}

		.info-box ul {
		  margin: 10px 0 0 0;
		  padding-left: 20px;
		}

		.info-box li {
		  margin: 5px 0;
		}

		.help-text {
		  display: block;
		  color: #666;
		  font-style: italic;
		  margin-top: 5px;
		}

		/* Vater-Kind-Status-Badges */
		#vater-kind-status {
		  margin: 10px 0;
		}

		.status-badge {
		  display: inline-block;
		  padding: 8px 15px;
		  border-radius: 20px;
		  font-size: 14px;
		  font-weight: bold;
		  margin: 5px 0;
		  border: 2px solid;
		}

		.vater-badge {
		  background-color: #e8f4fd;
		  color: #0056b3;
		  border-color: #007bff;
		}

		.kind-badge {
		  background-color: #fff3cd;
		  color: #856404;
		  border-color: #ffc107;
		}

		#kind-status-details {
		  margin-top: 8px;
		  font-weight: normal;
		}

		#kind-status-details code {
		  background-color: #f8f9fa;
		  padding: 2px 6px;
		  border-radius: 3px;
		  font-family: monospace;
		  font-size: 12px;
		}

		/* Readonly-Felder */
		.readonly-field {
		  background-color: #f8f9fa !important;
		  color: #6c757d !important;
		  border-color: #ced4da !important;
		  cursor: not-allowed !important;
		}

		.readonly-field:focus {
		  box-shadow: none !important;
		  border-color: #ced4da !important;
		}

		.kind-artikel-tabelle {
		  width: 100%;
		  border-collapse: collapse;
		  margin: 10px 0;
		}

		.kind-artikel-tabelle th,
		.kind-artikel-tabelle td {
		  padding: 8px 12px;
		  text-align: left;
		  border: 1px solid #ddd;
		}

		.kind-artikel-tabelle th {
		  background-color: #f0f0f0;
		  font-weight: bold;
		}

		.kind-artikel-tabelle .objekt-id {
		  font-family: monospace;
		  background-color: #e8f4f8;
		  padding: 2px 6px;
		  border-radius: 3px;
		  font-size: 0.9em;
		}

		.vater-artikel-info {
		  background-color: #f0f8ff;
		  padding: 10px;
		  border-radius: 5px;
		  border: 1px solid #cce7ff;
		}

		.vater-artikel-info .objekt-id {
		  font-family: monospace;
		  background-color: #e8f4f8;
		  padding: 2px 6px;
		  border-radius: 3px;
		  font-size: 0.9em;
		}

		.overlay-button {
		  background-color: #007bff;
		  color: white;
		  border: none;
		  padding: 8px 16px;
		  border-radius: 4px;
		  cursor: pointer;
		  margin: 5px;
		  font-size: 14px;
		}

		.overlay-button:hover {
		  background-color: #0056b3;
		}

		.overlay-button i {
		  margin-right: 5px;
		}

		.kind-artikel-bearbeiten,
		.kind-artikel-loeschen,
		.vater-artikel-oeffnen {
		  background: none;
		  border: 1px solid #ddd;
		  padding: 4px 8px;
		  margin: 2px;
		  border-radius: 3px;
		  cursor: pointer;
		  font-size: 12px;
		}

		.kind-artikel-bearbeiten:hover {
		  background-color: #e7f3ff;
		  border-color: #007bff;
		}

		.kind-artikel-loeschen:hover {
		  background-color: #ffe7e7;
		  border-color: #dc3545;
		}

		.vater-artikel-oeffnen:hover {
		  background-color: #e7f8e7;
		  border-color: #28a745;
		}

		/* Kindartikel Auswahl Overlay */
		#kindArtikelAuswahlOverlay {
		  position: fixed;
		  inset: 0;
		  display: none;
		  justify-content: center;
		  align-items: center;
		  background: rgba(0,0,0,0.5);
		  z-index: 1200;
		}

		#kindartikel-auswahl-content {
		  background: white;
		  padding: 2rem;
		  border-radius: 8px;
		  box-shadow: 0 0 15px rgba(0,0,0,0.3);
		  width: 90vw;
		  max-width: 900px;
		  max-height: 90vh;
		  overflow-y: auto;
		}

		.kindartikel-auswahl-header {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  margin-bottom: 20px;
		  border-bottom: 1px solid #ddd;
		  padding-bottom: 10px;
		}

		.kindartikel-auswahl-header h3 {
		  margin: 0;
		  color: #333;
		}

		.vater-info {
		  background-color: #f0f8ff;
		  padding: 15px;
		  border-radius: 5px;
		  margin-bottom: 20px;
		  border: 1px solid #cce7ff;
		}

		.vater-info h4 {
		  margin: 0 0 10px 0;
		  color: #0056b3;
		}

		.vater-artikel-details .objekt-id {
		  font-family: monospace;
		  background-color: #e8f4f8;
		  padding: 2px 6px;
		  border-radius: 3px;
		  font-size: 0.9em;
		}

		.artikel-suche {
		  margin-bottom: 20px;
		}

		.artikel-suche label {
		  display: block;
		  margin-bottom: 5px;
		  font-weight: bold;
		}

		.artikel-suche input {
		  width: 100%;
		  padding: 10px;
		  border: 1px solid #ddd;
		  border-radius: 4px;
		  font-size: 16px;
		}

		.artikel-liste-container {
		  max-height: 300px;
		  overflow-y: auto;
		  border: 1px solid #ddd;
		  border-radius: 4px;
		  margin-bottom: 20px;
		}

		.artikel-auswahl-tabelle {
		  width: 100%;
		  border-collapse: collapse;
		}

		.artikel-auswahl-tabelle th,
		.artikel-auswahl-tabelle td {
		  padding: 10px;
		  text-align: left;
		  border-bottom: 1px solid #eee;
		}

		.artikel-auswahl-tabelle th {
		  background-color: #f8f9fa;
		  font-weight: bold;
		  position: sticky;
		  top: 0;
		}

		.artikel-auswahl-tabelle tr:hover {
		  background-color: #f5f5f5;
		}

		.artikel-auswaehlen {
		  background-color: #28a745;
		  color: white;
		  border: none;
		  padding: 6px 12px;
		  border-radius: 3px;
		  cursor: pointer;
		  font-size: 12px;
		}

		.artikel-auswaehlen:hover {
		  background-color: #218838;
		}

		.kindartikel-konfiguration {
		  background-color: #f9f9f9;
		  padding: 20px;
		  border-radius: 5px;
		  border: 1px solid #ddd;
		}

		.kindartikel-konfiguration h4 {
		  margin: 0 0 15px 0;
		  color: #333;
		}

		.ausgewaehlter-artikel {
		  background-color: #e8f5e8;
		  padding: 10px;
		  border-radius: 4px;
		  margin-bottom: 15px;
		  border: 1px solid #c3e6c3;
		}

		.ausgewaehlter-artikel .objekt-id {
		  font-family: monospace;
		  background-color: #d4edda;
		  padding: 2px 6px;
		  border-radius: 3px;
		  font-size: 0.9em;
		}

		.preisberechnung-details {
		  background-color: #fff3cd;
		  padding: 10px;
		  border-radius: 4px;
		  border: 1px solid #ffeaa7;
		  margin: 10px 0;
		}

		.button-group {
		  display: flex;
		  gap: 10px;
		  margin-top: 20px;
		}

		.overlay-button.cancel {
		  background-color: #6c757d;
		}

		.overlay-button.cancel:hover {
		  background-color: #5a6268;
		}

		#kind-menge {
		  width: 100px;
		  padding: 5px;
		  border: 1px solid #ddd;
		  border-radius: 3px;
		  margin-right: 10px;
		}

		#kind-einheit {
		  font-weight: bold;
		  color: #666;
		}