From e8af5fc82e193e1164a5c5ea2ce86ac38c6368da Mon Sep 17 00:00:00 2001
From: GalacticCodeGambit
 <150372421+GalacticCodeGambit@users.noreply.github.com>
Date: Wed, 20 May 2026 18:33:59 +0200
Subject: [PATCH 1/5] Refactor CSS class names for consistency and clarity

---
 .../app/components/profile_dropdown.tsx       |   8 +-
 project/frontend/app/globals.css              |   2 +-
 project/frontend/app/recipeFinder/page.tsx    |  46 ++---
 project/frontend/app/recipeFinder/popup.tsx   |  22 +--
 project/frontend/app/recipeFinder/style.css   | 158 +++++++++---------
 5 files changed, 116 insertions(+), 120 deletions(-)

diff --git a/project/frontend/app/components/profile_dropdown.tsx b/project/frontend/app/components/profile_dropdown.tsx
index 503d7ed..1fbbe5d 100644
--- a/project/frontend/app/components/profile_dropdown.tsx
+++ b/project/frontend/app/components/profile_dropdown.tsx
@@ -26,7 +26,7 @@ export default function ProfileDropdown() {
             <div ref={menuRef} className="account-menu">
                 <button
                     onClick={() => setOpen(!open)}
-                    className="account-menu__trigger"
+                    className="account-menu-trigger"
                     aria-label="Account-Menü"
                     aria-expanded={open}
                 >
@@ -34,10 +34,10 @@ export default function ProfileDropdown() {
                 </button>
 
                 {open && (
-                    <div className="account-menu__dropdown" role="menu">
+                    <div className="account-menu-dropdown" role="menu">
                         <button
                             onClick={handleProfil}
-                            className="account-menu__item"
+                            className="account-menu-item"
                             role="menuitem"
                         >
                             <UserCircle size={18} />
@@ -45,7 +45,7 @@ export default function ProfileDropdown() {
                         </button>
                         <button
                             onClick={ handleLogout }
-                            className="account-menu__item"
+                            className="account-menu-item"
                             role="menuitem"
                         >
                             <LogOut size={18} />
diff --git a/project/frontend/app/globals.css b/project/frontend/app/globals.css
index 83073d3..77f8a9a 100644
--- a/project/frontend/app/globals.css
+++ b/project/frontend/app/globals.css
@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import url("tailwindcss");
 
 
 :root {
diff --git a/project/frontend/app/recipeFinder/page.tsx b/project/frontend/app/recipeFinder/page.tsx
index 458c09f..0fe2f5b 100644
--- a/project/frontend/app/recipeFinder/page.tsx
+++ b/project/frontend/app/recipeFinder/page.tsx
@@ -219,56 +219,56 @@ export default function RecipeFinder() {
                                     });
                                 }}
                                 onClick={() => setModalOpen(true)}
-                                className="finder-sidebar__add-btn"
+                                className="finder-sidebar-add-btn"
                             >
                                 <Plus size={15} />
                                 Zutat hinzufügen
                             </Button>
-                            <Button onClick={() => setIngredients([])} className="finder-sidebar__clear-btn">
+                            <Button onClick={() => setIngredients([])} className="finder-sidebar-clear-btn">
                                 Alle entfernen
                             </Button>
                         </div>
 
 
                         {ingredients.length > 0 ? (
-                            <div className="finder-sidebar__ingredient-list">
+                            <div className="finder-sidebar-ingredient-list">
                                 {ingredients.map(i => (
-                                    <div key={i.name} className="finder-sidebar__ingredient">
-                                        <span className="finder-sidebar__ingredient-name">{i.name}</span>
+                                    <div key={i.name} className="finder-sidebar-ingredient">
+                                        <span className="finder-sidebar-ingredient-name">{i.name}</span>
 
                                         {editingIngredient === i.name ? (
                                             // Bearbeitungsmodus
-                                            <div className="finder-sidebar__ingredient-edit">
+                                            <div className="finder-sidebar-ingredient-edit">
                                                 <input
                                                     type="number"
                                                     value={editAmount}
                                                     onChange={e => setEditAmount(e.target.value)}
                                                     onKeyDown={e => e.key === "Enter" && handleEditSave(i.name)}
                                                     min={0}
-                                                    className="finder-sidebar__edit-input"
+                                                    className="finder-sidebar-edit-input"
                                                     autoFocus
                                                 />
                                                 <select
                                                     value={editUnit}
                                                     onChange={e => setEditUnit(e.target.value)}
-                                                    className="finder-sidebar__edit-select"
+                                                    className="finder-sidebar-edit-select"
                                                 >
                                                     {EINHEITEN.map(e => <option key={e} value={e}>{e}</option>)}
                                                 </select>
-                                                <button onClick={() => handleEditSave(i.name)} className="finder-sidebar__edit-save">✓</button>
-                                                <button onClick={() => setEditingIngredient(null)} className="finder-sidebar__edit-cancel">✕</button>
+                                                <button onClick={() => handleEditSave(i.name)} className="finder-sidebar-edit-save">✓</button>
+                                                <button onClick={() => setEditingIngredient(null)} className="finder-sidebar-edit-cancel">✕</button>
                                             </div>
                                         ) : (
                                             // Anzeigemodus — klickbar
-                                            <div className="finder-sidebar__ingredient-right">
+                                            <div className="finder-sidebar-ingredient-right">
                                                 <span
                                                     onClick={() => handleEditStart(i)}
-                                                    className="finder-sidebar__ingredient-amount"
+                                                    className="finder-sidebar-ingredient-amount"
                                                     title="Klicken zum Bearbeiten"
                                                 >
                                                     {i.amount} {i.unit}
                                                 </span>
-                                                <button onClick={() => handleRemoveIngredient(i.name)} className="finder-sidebar__ingredient-remove">
+                                                <button onClick={() => handleRemoveIngredient(i.name)} className="finder-sidebar-ingredient-remove">
                                                     <X size={14} />
                                                 </button>
                                             </div>
@@ -277,27 +277,27 @@ export default function RecipeFinder() {
                                 ))}
                             </div>
                         ) : (
-                            <p className="finder-sidebar__empty">Noch keine Zutaten.</p>
+                            <p className="finder-sidebar-empty">Noch keine Zutaten.</p>
                         )}
                     </div>
 
                     {/* Personenanzahl */}
-                    <div className="finder-sidebar__section">
-                        <p className="finder-sidebar__title">Personen</p>
-                        <div className="finder-sidebar__persons">
-                            <button onClick={() => setServings(Math.max(1, servings - 1))} className="finder-sidebar__persons-btn">−</button>
+                    <div className="finder-sidebar-section">
+                        <p className="finder-sidebar-title">Personen</p>
+                        <div className="finder-sidebar-persons">
+                            <button onClick={() => setServings(Math.max(1, servings - 1))} className="finder-sidebar-persons-btn">−</button>
                             <div>
-                                <div className="finder-sidebar__persons-count">{servings}</div>
-                                <div className="finder-sidebar__persons-label">Personen</div>
+                                <div className="finder-sidebar-persons-count">{servings}</div>
+                                <div className="finder-sidebar-persons-label">Personen</div>
                             </div>
-                            <button onClick={() => setServings(servings + 1)} className="finder-sidebar__persons-btn">+</button>
+                            <button onClick={() => setServings(servings + 1)} className="finder-sidebar-persons-btn">+</button>
                         </div>
                     </div>
 
                     {/* Suche starten */}
-                    <div className="finder-sidebar__section">
+                    <div className="finder-sidebar-section">
                         {searchError && <p style={{ color: '#b91c1c', fontSize: 13, fontFamily: 'system-ui', marginBottom: 8 }}>{searchError}</p>}
-                        <button onClick={handleSearch} disabled={searching || ingredients.length === 0} className="finder-sidebar__search-btn">
+                        <button onClick={handleSearch} disabled={searching || ingredients.length === 0} className="finder-sidebar-search-btn">
                             <Search size={15} />
                             {searching ? "Suche läuft…" : "Rezepte suchen"}
                         </button>
diff --git a/project/frontend/app/recipeFinder/popup.tsx b/project/frontend/app/recipeFinder/popup.tsx
index 444545b..60bfe40 100644
--- a/project/frontend/app/recipeFinder/popup.tsx
+++ b/project/frontend/app/recipeFinder/popup.tsx
@@ -64,16 +64,16 @@ export default function AddIngredientsPopup({ ingredients, onAdd, suggestions =
 
     return (
         <div className="popup">
-            <h2 className="popup__title">Zutaten Hinzufügen</h2>
+            <h2 className="popup-title">Zutaten Hinzufügen</h2>
 
-            <div className="popup__fields">
+            <div className="popup-fields">
                 <input
                     type="text"
                     value={ingredientName}
                     onChange={e => setIngredientName(e.target.value)}
                     onKeyDown={e => e.key === "Enter" && handleAddIngredient()}
                     placeholder="z.B. Tomaten"
-                    className="popup__input"
+                    className="popup-input"
                 />
                 <input
                     ref={amountInputRef}
@@ -83,21 +83,21 @@ export default function AddIngredientsPopup({ ingredients, onAdd, suggestions =
                     onKeyDown={e => e.key === "Enter" && handleAddIngredient()}
                     placeholder="Menge"
                     min={0}
-                    className="popup__input popup__input--amount"
+                    className="popup-input popup-input-amount"
                 />
                 <select
                     value={ingredientUnit}
                     onChange={e => setIngredientUnit(e.target.value)}
-                    className="popup__select"
+                    className="popup-select"
                 >
                     {EINHEITEN.map(e => <option key={e} value={e}>{e}</option>)}
                 </select>
             </div>
 
             {suggestions.length > 0 && (
-                <div className="popup__suggestions">
-                    <p className="popup__suggestions-label">Häufig verwendet</p>
-                    <div className="popup__suggestions-list">
+                <div className="popup-suggestions">
+                    <p className="popup-suggestions-label">Häufig verwendet</p>
+                    <div className="popup-suggestions-list">
                         {suggestions.map(s => {
                             const added = isAlreadyAdded(s);
                             return (
@@ -106,7 +106,7 @@ export default function AddIngredientsPopup({ ingredients, onAdd, suggestions =
                                     type="button"
                                     disabled={added}
                                     onClick={() => !added && handleSuggestionClick(s)}
-                                    className={`popup__suggestion-badge${added ? " popup__suggestion-badge--added" : ""}`}
+                                    className={`popup-suggestion-badge${added ? " popup-suggestion-badge-added" : ""}`}
                                     title={added ? "Bereits hinzugefügt" : (s.unit ? `${s.name} (${s.unit})` : s.name)}
                                 >
                                     {s.name}
@@ -117,9 +117,9 @@ export default function AddIngredientsPopup({ ingredients, onAdd, suggestions =
                 </div>
             )}
 
-            {inputError && <p className="popup__error">{inputError}</p>}
+            {inputError && <p className="popup-error">{inputError}</p>}
 
-            <button onClick={handleAddIngredient} className="popup__btn">
+            <button onClick={handleAddIngredient} className="popup-btn">
                 Hinzufügen
             </button>
         </div>
diff --git a/project/frontend/app/recipeFinder/style.css b/project/frontend/app/recipeFinder/style.css
index 63041c9..97ccbc8 100644
--- a/project/frontend/app/recipeFinder/style.css
+++ b/project/frontend/app/recipeFinder/style.css
@@ -3,7 +3,7 @@
     display: inline-block;
 }
 
-.account-menu__trigger {
+.account-menu-trigger {
     background: none;
     border: none;
     cursor: pointer;
@@ -15,30 +15,30 @@
     transition: background-color 0.15s ease;
 }
 
-.account-menu__trigger:hover {
+.account-menu-trigger:hover {
     background-color: #f3f4f6;
 }
 
-.account-menu__trigger:focus-visible {
+.account-menu-trigger:focus-visible {
     outline: 2px solid #3b82f6;
     outline-offset: 2px;
 }
 
-.account-menu__dropdown {
+.account-menu-dropdown {
     position: absolute;
     right: 0;
     top: calc(100% + 6px);
-    background: #ffffff;
+    background: #fff;
     border: 1px solid #e5e7eb;
     border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
     min-width: 180px;
     z-index: 100;
     overflow: hidden;
     animation: account-menu-fade-in 0.12s ease-out;
 }
 
-.account-menu__item {
+.account-menu-item {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -53,11 +53,11 @@
     transition: background-color 0.1s ease;
 }
 
-.account-menu__item:hover {
+.account-menu-item:hover {
     background-color: #f3f4f6;
 }
 
-.account-menu__item:focus-visible {
+.account-menu-item:focus-visible {
     outline: none;
     background-color: #eff6ff;
 }
@@ -67,6 +67,7 @@
         opacity: 0;
         transform: translateY(-4px);
     }
+
     to {
         opacity: 1;
         transform: translateY(0);
@@ -80,7 +81,7 @@
     gap: 20px;
 }
 
-.popup__title {
+.popup-title {
     font-size: 20px;
     font-weight: 600;
     color: #111;
@@ -89,16 +90,16 @@
     margin: 0;
 }
 
-.popup__fields {
+.popup-fields {
     display: flex;
     gap: 10px;
 }
 
-.popup__fields--stacked {
+.popup-fields-stacked {
     flex-direction: column;
 }
 
-.popup__input {
+.popup-input {
     flex: 1;
     padding: 10px 12px;
     border-radius: 6px;
@@ -111,18 +112,18 @@
     box-sizing: border-box;
 }
 
-.popup__input:focus {
+.popup-input:focus {
     border-color: #030213;
     background: #fff;
 }
 
-.popup__input--amount {
+.popup-input-amount {
     flex: 0 0 90px;
     width: 90px;
     min-width: 0;
 }
 
-.popup__select {
+.popup-select {
     padding: 10px 12px;
     border-radius: 6px;
     border: 1px solid #ddd;
@@ -134,12 +135,12 @@
     transition: border-color 0.15s;
 }
 
-.popup__select:focus {
+.popup-select:focus {
     border-color: #030213;
     background: #fff;
 }
 
-.popup__error {
+.popup-error {
     font-size: 13px;
     color: #b91c1c;
     font-family: system-ui;
@@ -148,13 +149,13 @@
 }
 
 /* ── Zutaten-Vorschläge (Top 5 Badges) ─────────────────────── */
-.popup__suggestions {
+.popup-suggestions {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }
 
-.popup__suggestions-label {
+.popup-suggestions-label {
     font-size: 12px;
     font-weight: 600;
     color: #6b7280;
@@ -164,13 +165,13 @@
     font-family: system-ui;
 }
 
-.popup__suggestions-list {
+.popup-suggestions-list {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
 }
 
-.popup__suggestion-badge {
+.popup-suggestion-badge {
     padding: 5px 12px;
     background: #f3f3f5;
     border: 1px solid #e5e7eb;
@@ -182,19 +183,19 @@
     transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 
-.popup__suggestion-badge:hover {
+.popup-suggestion-badge:hover {
     background: #030213;
     border-color: #030213;
     color: #fff;
 }
 
-.popup__suggestion-badge:focus-visible {
+.popup-suggestion-badge:focus-visible {
     outline: 2px solid #030213;
     outline-offset: 2px;
 }
 
-.popup__suggestion-badge--added,
-.popup__suggestion-badge--added:hover {
+.popup-suggestion-badge-added,
+.popup-suggestion-badge-added:hover {
     background: #f3f3f5;
     border-color: #e5e7eb;
     color: #9ca3af;
@@ -203,7 +204,7 @@
     opacity: 0.6;
 }
 
-.popup__btn {
+.popup-btn {
     display: block;
     margin: 0 auto;
     padding: 10px 32px;
@@ -217,8 +218,8 @@
     transition: background-color 0.15s;
 }
 
-.popup__btn:hover {
-    background: rgba(3, 2, 19, 0.85);
+.popup-btn:hover {
+    background: rgb(3 2 19 / 85%);
 }
 
 /* ── RecipeFinder Layout ───────────────────────────────────── */
@@ -238,22 +239,22 @@
     background: #fff;
 }
 
-.finder-sidebar__section {
+.finder-sidebar-section {
     padding: 20px;
     border-bottom: 1px solid #e5e7eb;
 }
 
-.finder-sidebar__title {
+.finder-sidebar-title {
     font-size: 13px;
     font-weight: 600;
     color: #6b7280;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    margin: 0 0 12px 0;
+    margin: 0 0 12px;
     font-family: system-ui;
 }
 
-.finder-sidebar__add-btn {
+.finder-sidebar-add-btn {
     flex: 1;
     padding: 10px;
     background: #030213;
@@ -270,18 +271,18 @@
     transition: background 0.15s;
 }
 
-.finder-sidebar__add-btn:hover {
-    background: rgba(3, 2, 19, 0.85);
+.finder-sidebar-add-btn:hover {
+    background: rgb(3 2 19 / 85%);
 }
 
-.finder-sidebar__ingredient-list {
+.finder-sidebar-ingredient-list {
     display: flex;
     flex-direction: column;
     gap: 6px;
     margin-top: 12px;
 }
 
-.finder-sidebar__ingredient {
+.finder-sidebar-ingredient {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -292,17 +293,21 @@
     font-family: system-ui;
 }
 
-.finder-sidebar__ingredient-name {
+.finder-sidebar-ingredient-name {
     font-weight: 500;
     color: #111;
 }
 
-.finder-sidebar__ingredient-amount {
+.finder-sidebar-ingredient-amount {
     color: #6b7280;
     font-size: 12px;
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 4px;
+    transition: background 0.1s;
 }
 
-.finder-sidebar__ingredient-remove {
+.finder-sidebar-ingredient-remove {
     background: none;
     border: none;
     cursor: pointer;
@@ -313,25 +318,25 @@
     transition: color 0.1s;
 }
 
-.finder-sidebar__ingredient-remove:hover {
+.finder-sidebar-ingredient-remove:hover {
     color: #ef4444;
 }
 
-.finder-sidebar__empty {
+.finder-sidebar-empty {
     font-size: 13px;
     color: #9ca3af;
     font-family: system-ui;
-    margin: 8px 0 0 0;
+    margin: 8px 0 0;
 }
 
 /* Personenanzahl */
-.finder-sidebar__persons {
+.finder-sidebar-persons {
     display: flex;
     align-items: center;
     gap: 16px;
 }
 
-.finder-sidebar__persons-btn {
+.finder-sidebar-persons-btn {
     width: 32px;
     height: 32px;
     border: 1px solid #e5e7eb;
@@ -345,11 +350,11 @@
     transition: background 0.1s;
 }
 
-.finder-sidebar__persons-btn:hover {
+.finder-sidebar-persons-btn:hover {
     background: #f3f4f6;
 }
 
-.finder-sidebar__persons-count {
+.finder-sidebar-persons-count {
     font-size: 22px;
     font-weight: 600;
     font-family: system-ui;
@@ -358,14 +363,14 @@
     text-align: center;
 }
 
-.finder-sidebar__persons-label {
+.finder-sidebar-persons-label {
     font-size: 12px;
     color: #6b7280;
     font-family: system-ui;
 }
 
 /* Suchen Button */
-.finder-sidebar__search-btn {
+.finder-sidebar-search-btn {
     width: 100%;
     padding: 12px;
     background: #030213;
@@ -383,15 +388,15 @@
     transition: background 0.15s;
 }
 
-.finder-sidebar__search-btn:hover:not(:disabled) {
-    background: rgba(3, 2, 19, 0.85);
-}
-
-.finder-sidebar__search-btn:disabled {
+.finder-sidebar-search-btn:disabled {
     opacity: 0.4;
     cursor: not-allowed;
 }
 
+.finder-sidebar-search-btn:hover:not(:disabled) {
+    background: rgb(3 2 19 / 85%);
+}
+
 /* Rezepte Bereich */
 .finder-content {
     flex: 1;
@@ -400,7 +405,7 @@
     background: #fafafa;
 }
 
-.finder-content__empty {
+.finder-content-empty {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -410,13 +415,13 @@
     font-family: system-ui;
 }
 
-.finder-content__grid {
+.finder-content-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 16px;
 }
 
-.finder-content__card {
+.finder-content-card {
     background: #fff;
     border: 1px solid #e5e7eb;
     border-radius: 12px;
@@ -424,14 +429,14 @@
     font-family: system-ui;
 }
 
-.finder-content__card-name {
+.finder-content-card-name {
     font-size: 15px;
     font-weight: 600;
     color: #111;
     margin: 0;
 }
 
-.finder-sidebar__clear-btn {
+.finder-sidebar-clear-btn {
     flex-shrink: 0;
     padding: 10px;
     background: #fff;
@@ -445,38 +450,29 @@
     transition: background 0.15s, color 0.15s;
 }
 
-.finder-sidebar__clear-btn:hover {
+.finder-sidebar-clear-btn:hover {
     background: #fef2f2;
     color: #ef4444;
     border-color: #ef4444;
 }
-.finder-sidebar__ingredient-right {
+.finder-sidebar-ingredient-right {
     display: flex;
     align-items: center;
     gap: 8px;
 }
 
-.finder-sidebar__ingredient-amount {
-    color: #6b7280;
-    font-size: 12px;
-    cursor: pointer;
-    padding: 2px 6px;
-    border-radius: 4px;
-    transition: background 0.1s;
-}
-
-.finder-sidebar__ingredient-amount:hover {
+.finder-sidebar-ingredient-amount:hover {
     background: #e5e7eb;
     color: #111;
 }
 
-.finder-sidebar__ingredient-edit {
+.finder-sidebar-ingredient-edit {
     display: flex;
     align-items: center;
     gap: 4px;
 }
 
-.finder-sidebar__edit-input {
+.finder-sidebar-edit-input {
     width: 52px;
     padding: 3px 6px;
     border: 1px solid #d1d5db;
@@ -486,11 +482,11 @@
     outline: none;
 }
 
-.finder-sidebar__edit-input:focus {
+.finder-sidebar-edit-input:focus {
     border-color: #030213;
 }
 
-.finder-sidebar__edit-select {
+.finder-sidebar-edit-select {
     padding: 3px 4px;
     border: 1px solid #d1d5db;
     border-radius: 6px;
@@ -500,11 +496,11 @@
     outline: none;
 }
 
-.finder-sidebar__edit-select:focus {
+.finder-sidebar-edit-select:focus {
     border-color: #030213;
 }
 
-.finder-sidebar__edit-save {
+.finder-sidebar-edit-save {
     background: #030213;
     color: #fff;
     border: none;
@@ -515,11 +511,11 @@
     transition: background 0.15s;
 }
 
-.finder-sidebar__edit-save:hover {
-    background: rgba(3, 2, 19, 0.8);
+.finder-sidebar-edit-save:hover {
+    background: rgb(3 2 19 / 80%);
 }
 
-.finder-sidebar__edit-cancel {
+.finder-sidebar-edit-cancel {
     background: none;
     color: #9ca3af;
     border: 1px solid #e5e7eb;
@@ -530,7 +526,7 @@
     transition: color 0.1s;
 }
 
-.finder-sidebar__edit-cancel:hover {
+.finder-sidebar-edit-cancel:hover {
     color: #ef4444;
     border-color: #ef4444;
 }
\ No newline at end of file

From 3114473e4e722011367e56a4909b288068bce221 Mon Sep 17 00:00:00 2001
From: GalacticCodeGambit
 <150372421+GalacticCodeGambit@users.noreply.github.com>
Date: Wed, 20 May 2026 18:51:11 +0200
Subject: [PATCH 2/5] Refactor CSS variables for improved readability and
 consistency

---
 project/frontend/app/globals.css            | 112 ++++++++++----------
 project/frontend/app/recipeFinder/style.css |   1 +
 2 files changed, 58 insertions(+), 55 deletions(-)

diff --git a/project/frontend/app/globals.css b/project/frontend/app/globals.css
index 77f8a9a..a437b09 100644
--- a/project/frontend/app/globals.css
+++ b/project/frontend/app/globals.css
@@ -1,45 +1,46 @@
+/* stylelint-disable */
 @import url("tailwindcss");
 
 
 :root {
     --font-size: 16px;
-    --background: #ffffff;
-    --foreground: oklch(0.145 0 0);
-    --card: #ffffff;
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
+    --background: #fff;
+    --foreground: oklch(14.5% 0 0deg);
+    --card: #fff;
+    --card-foreground: oklch(14.5% 0 0deg);
+    --popover: oklch(100% 0 0deg);
+    --popover-foreground: oklch(14.5% 0 0deg);
     --primary: #030213;
-    --primary-foreground: oklch(1 0 0);
-    --secondary: oklch(0.95 0.0058 264.53);
+    --primary-foreground: oklch(100% 0 0deg);
+    --secondary: oklch(95% 0.0058 264.53deg);
     --secondary-foreground: #030213;
     --muted: #ececf0;
     --muted-foreground: #717182;
     --accent: #e9ebef;
     --accent-foreground: #030213;
     --destructive: #d4183d;
-    --destructive-foreground: #ffffff;
-    --border: rgba(0, 0, 0, 0.1);
+    --destructive-foreground: #fff;
+    --border: rgb(0 0 0 / 10%);
     --input: transparent;
     --input-background: #f3f3f5;
     --switch-background: #cbced4;
     --font-weight-medium: 500;
     --font-weight-normal: 400;
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.646 0.222 41.116);
-    --chart-2: oklch(0.6 0.118 184.704);
-    --chart-3: oklch(0.398 0.07 227.392);
-    --chart-4: oklch(0.828 0.189 84.429);
-    --chart-5: oklch(0.769 0.188 70.08);
+    --ring: oklch(70.8% 0 0deg);
+    --chart-1: oklch(64.6% 0.222 41.116deg);
+    --chart-2: oklch(60% 0.118 184.704deg);
+    --chart-3: oklch(39.8% 0.07 227.392deg);
+    --chart-4: oklch(82.8% 0.189 84.429deg);
+    --chart-5: oklch(76.9% 0.188 70.08deg);
     --radius: 0.625rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar: oklch(98.5% 0 0deg);
+    --sidebar-foreground: oklch(14.5% 0 0deg);
     --sidebar-primary: #030213;
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
+    --sidebar-primary-foreground: oklch(98.5% 0 0deg);
+    --sidebar-accent: oklch(97% 0 0deg);
+    --sidebar-accent-foreground: oklch(20.5% 0 0deg);
+    --sidebar-border: oklch(92.2% 0 0deg);
+    --sidebar-ring: oklch(70.8% 0 0deg);
     --text-base: 10px;
     --text-2xl: 30px;
     --text-lg: 20px;
@@ -47,42 +48,43 @@
 }
 
 .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.145 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.145 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.985 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.396 0.141 25.723);
-    --destructive-foreground: oklch(0.637 0.237 25.331);
-    --border: oklch(0.269 0 0);
-    --input: oklch(0.269 0 0);
-    --ring: oklch(0.439 0 0);
+    --background: oklch(14.5% 0 0deg);
+    --foreground: oklch(98.5% 0 0deg);
+    --card: oklch(14.5% 0 0deg);
+    --card-foreground: oklch(98.5% 0 0deg);
+    --popover: oklch(14.5% 0 0deg);
+    --popover-foreground: oklch(98.5% 0 0deg);
+    --primary: oklch(98.5% 0 0deg);
+    --primary-foreground: oklch(20.5% 0 0deg);
+    --secondary: oklch(26.9% 0 0deg);
+    --secondary-foreground: oklch(98.5% 0 0deg);
+    --muted: oklch(26.9% 0 0deg);
+    --muted-foreground: oklch(70.8% 0 0deg);
+    --accent: oklch(26.9% 0 0deg);
+    --accent-foreground: oklch(98.5% 0 0deg);
+    --destructive: oklch(39.6% 0.141 25.723deg);
+    --destructive-foreground: oklch(63.7% 0.237 25.331deg);
+    --border: oklch(26.9% 0 0deg);
+    --input: oklch(26.9% 0 0deg);
+    --ring: oklch(43.9% 0 0deg);
     --font-weight-medium: 500;
     --font-weight-normal: 400;
-    --chart-1: oklch(0.488 0.243 264.376);
-    --chart-2: oklch(0.696 0.17 162.48);
-    --chart-3: oklch(0.769 0.188 70.08);
-    --chart-4: oklch(0.627 0.265 303.9);
-    --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(0.269 0 0);
-    --sidebar-ring: oklch(0.439 0 0);
+    --chart-1: oklch(48.8% 0.243 264.376deg);
+    --chart-2: oklch(69.6% 0.17 162.48deg);
+    --chart-3: oklch(76.9% 0.188 70.08deg);
+    --chart-4: oklch(62.7% 0.265 303.9deg);
+    --chart-5: oklch(64.5% 0.246 16.439deg);
+    --sidebar: oklch(20.5% 0 0deg);
+    --sidebar-foreground: oklch(98.5% 0 0deg);
+    --sidebar-primary: oklch(48.8% 0.243 264.376deg);
+    --sidebar-primary-foreground: oklch(98.5% 0 0deg);
+    --sidebar-accent: oklch(26.9% 0 0deg);
+    --sidebar-accent-foreground: oklch(98.5% 0 0deg);
+    --sidebar-border: oklch(26.9% 0 0deg);
+    --sidebar-ring: oklch(43.9% 0 0deg);
 }
 
+/* stylelint-disable-next-line at-rule-no-unknown */
 @theme inline {
     --color-background: var(--background);
     --color-foreground: var(--foreground);
diff --git a/project/frontend/app/recipeFinder/style.css b/project/frontend/app/recipeFinder/style.css
index 97ccbc8..4666b5e 100644
--- a/project/frontend/app/recipeFinder/style.css
+++ b/project/frontend/app/recipeFinder/style.css
@@ -455,6 +455,7 @@
     color: #ef4444;
     border-color: #ef4444;
 }
+
 .finder-sidebar-ingredient-right {
     display: flex;
     align-items: center;

From 0899e30ca81f2830630a1bc32bcc76a4393fcf88 Mon Sep 17 00:00:00 2001
From: GalacticCodeGambit
 <150372421+GalacticCodeGambit@users.noreply.github.com>
Date: Thu, 21 May 2026 09:20:57 +0200
Subject: [PATCH 3/5] Remove unnecessary stylelint directive for cleaner CSS

---
 project/frontend/app/globals.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/project/frontend/app/globals.css b/project/frontend/app/globals.css
index a437b09..9e3748f 100644
--- a/project/frontend/app/globals.css
+++ b/project/frontend/app/globals.css
@@ -84,7 +84,6 @@
     --sidebar-ring: oklch(43.9% 0 0deg);
 }
 
-/* stylelint-disable-next-line at-rule-no-unknown */
 @theme inline {
     --color-background: var(--background);
     --color-foreground: var(--foreground);

From 30f3e2d9d042b7d3b88d10068eb7c8e08bbbda9e Mon Sep 17 00:00:00 2001
From: GalacticCodeGambit
 <150372421+GalacticCodeGambit@users.noreply.github.com>
Date: Thu, 21 May 2026 09:56:57 +0200
Subject: [PATCH 4/5] Refactor variable names for consistency in recipe
 filtering functions

---
 project/backend/RecipeSUCUK.py | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/project/backend/RecipeSUCUK.py b/project/backend/RecipeSUCUK.py
index e9b27fb..909b148 100644
--- a/project/backend/RecipeSUCUK.py
+++ b/project/backend/RecipeSUCUK.py
@@ -1,5 +1,4 @@
 # SUCUK = Search for Uncomplicated Cooking and User-friendly Kitchen recipes
-import Database
 from Ingredient import Ingredient
 from Recipe import Recipe
 from Database import getAllRecipes, getAllIngredientsForRecipe
@@ -8,8 +7,8 @@
 def findRecipes(ingredients: list[Ingredient]) -> list[Recipe]:
     recipes = __initRecipes()
 
-    for Ingredient in ingredients:
-        recipes = __filterRecipes(recipes, Ingredient)
+    for ingredient in ingredients:
+        recipes = __filterRecipes(recipes, ingredient)
 
     recipes.sort(key=lambda x: x.getRating(), reverse=True)
 
@@ -19,10 +18,10 @@ def findRecipes(ingredients: list[Ingredient]) -> list[Recipe]:
     return recipes
 
 
-def __filterRecipes(recipes: list[Recipe], Ingredient: Ingredient) -> list[Recipe]:
+def __filterRecipes(recipes: list[Recipe], ingredient: Ingredient) -> list[Recipe]:
     for recipe in recipes:
         for recipeIngredient in recipe.getIngredients():
-            if recipeIngredient.getName() == Ingredient.getName():
+            if recipeIngredient.getName() == ingredient.getName():
                 recipe.incrementMatching()
                 recipe.setRating(recipe.getMatching() / len(recipe.getIngredients()))
     return recipes

From 02ec529598caca04a3068e2dbf5fa210e0aacaca Mon Sep 17 00:00:00 2001
From: GalacticCodeGambit
 <150372421+GalacticCodeGambit@users.noreply.github.com>
Date: Thu, 21 May 2026 10:40:23 +0200
Subject: [PATCH 5/5] Fix css

---
 project/frontend/app/globals.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/project/frontend/app/globals.css b/project/frontend/app/globals.css
index 9e3748f..4bfe618 100644
--- a/project/frontend/app/globals.css
+++ b/project/frontend/app/globals.css
@@ -1,5 +1,5 @@
 /* stylelint-disable */
-@import url("tailwindcss");
+@import "tailwindcss";
 
 
 :root {