From 45bb5665301a5f159a6dcf6c6fb38b5260962ffb Mon Sep 17 00:00:00 2001
From: Meik <meikdre@gmx.de>
Date: Wed, 5 Aug 2026 19:19:56 +0200
Subject: [PATCH] fix: clarify mobile slot card hierarchy

Prioritize store identity over booking controls and make card boundaries and
booking states easier to scan on mobile.
---
 .commitmessage                      |  5 +-
 src/components/MobileConfigList.css | 74 +++++++++++++++++++++++++++--
 src/components/MobileConfigList.js  | 20 ++++----
 3 files changed, 84 insertions(+), 15 deletions(-)

diff --git a/.commitmessage b/.commitmessage
index ab117b3..f391d48 100644
--- a/.commitmessage
+++ b/.commitmessage
@@ -1,3 +1,4 @@
-fix: compact mobile session header
+fix: clarify mobile slot card hierarchy
 
-Reduce the mobile profile header to a compact identity row and concise actions.
+Prioritize store identity over booking controls and make card boundaries and
+booking states easier to scan on mobile.
diff --git a/src/components/MobileConfigList.css b/src/components/MobileConfigList.css
index 1521c22..e59036b 100644
--- a/src/components/MobileConfigList.css
+++ b/src/components/MobileConfigList.css
@@ -160,16 +160,25 @@
 
   .mobile-config-list__cards {
     display: grid;
-    gap: 0.75rem;
+    gap: 0.9rem;
   }
 
   .mobile-config-card {
-    border: 1px solid #d1d5db;
+    border: 1px solid #94a3b8;
+    border-left-width: 4px;
     border-radius: 6px;
     background: #fff;
     padding: 0.9rem;
   }
 
+  .mobile-config-card--active {
+    border-left-color: #15803d;
+  }
+
+  .mobile-config-card--inactive {
+    border-left-color: #64748b;
+  }
+
   .mobile-config-card__header,
   .mobile-config-card__switch-row,
   .mobile-config-card__check-row {
@@ -179,6 +188,23 @@
     gap: 0.75rem;
   }
 
+  .mobile-config-card__header {
+    padding-bottom: 0.8rem;
+    border-bottom: 1px solid #dbe4ee;
+  }
+
+  .mobile-config-card__title {
+    font-size: 1.0625rem;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .mobile-config-card__id,
+  .mobile-config-card__slots {
+    font-size: 0.75rem;
+    font-weight: 400;
+  }
+
   .mobile-config-card__slots {
     margin-top: 0.45rem !important;
   }
@@ -200,12 +226,31 @@
   }
 
   .mobile-config-card__switch-row {
-    margin-top: 0.9rem;
+    margin-top: 0;
     padding: 0.75rem 0;
-    border-top: 1px solid #e5e7eb;
     border-bottom: 1px solid #e5e7eb;
   }
 
+  .mobile-config-card__booking-label,
+  .mobile-config-card__notify-label {
+    color: #374151;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .mobile-config-card__booking-status {
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  .mobile-config-card--active .mobile-config-card__booking-status {
+    color: #15803d;
+  }
+
+  .mobile-config-card--inactive .mobile-config-card__booking-status {
+    color: #64748b;
+  }
+
   .mobile-config-card input[type='checkbox'] {
     width: 1.2rem;
     height: 1.2rem;
@@ -230,6 +275,13 @@
     text-align: left;
   }
 
+  .mobile-config-card__field > span,
+  .mobile-config-card__range > span {
+    color: #64748b;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
   .mobile-config-card__core-fields select,
   .mobile-config-card__range {
     box-sizing: border-box;
@@ -240,6 +292,12 @@
     background: #fff;
   }
 
+  .mobile-config-card__field-value {
+    color: #1f2937;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
   .mobile-config-card__range {
     align-content: center;
     padding: 0.4rem 0.55rem;
@@ -248,7 +306,8 @@
   .mobile-config-card__range strong {
     overflow: hidden;
     color: #1f2937;
-    font-size: 0.8rem;
+    font-size: 0.875rem;
+    font-weight: 600;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -265,6 +324,11 @@
     gap: 0.1rem;
   }
 
+  .mobile-config-card__check-row small {
+    font-size: 0.75rem;
+    font-weight: 400;
+  }
+
   .mobile-config-card__details {
     margin-top: 0.8rem;
     border-top: 1px solid #e5e7eb;
diff --git a/src/components/MobileConfigList.js b/src/components/MobileConfigList.js
index 29c54b2..4197e94 100644
--- a/src/components/MobileConfigList.js
+++ b/src/components/MobileConfigList.js
@@ -85,11 +85,15 @@ const MobileConfigList = ({
           const range = entry.desiredDateRange || (entry.desiredDate ? { start: entry.desiredDate, end: entry.desiredDate } : null);
           const slots = formatRegularPickup(regularPickupMap?.[entry.id]);
           return (
-            <article key={entry.id} className="mobile-config-card" data-store-row={entry.id}>
+            <article
+              key={entry.id}
+              className={`mobile-config-card ${entry.active ? 'mobile-config-card--active' : 'mobile-config-card--inactive'}`}
+              data-store-row={entry.id}
+            >
               <header className="mobile-config-card__header">
                 <div>
-                  <h3>{entry.label || `Store ${entry.id}`}</h3>
-                  <p>#{entry.id}</p>
+                  <h3 className="mobile-config-card__title">{entry.label || `Store ${entry.id}`}</h3>
+                  <p className="mobile-config-card__id">#{entry.id}</p>
                   {slots && <p className="mobile-config-card__slots">Slots: {slots}</p>}
                 </div>
                 <a
@@ -109,8 +113,8 @@ const MobileConfigList = ({
 
               <label className="mobile-config-card__switch-row">
                 <span>
-                  <strong>Automatisch buchen</strong>
-                  <small>{entry.active ? 'Aktiv' : 'Inaktiv'}</small>
+                  <strong className="mobile-config-card__booking-label">Automatisch buchen</strong>
+                  <small className="mobile-config-card__booking-status">{entry.active ? 'Aktiv' : 'Inaktiv'}</small>
                 </span>
                 <input
                   type="checkbox"
@@ -121,9 +125,9 @@ const MobileConfigList = ({
               </label>
 
               <div className="mobile-config-card__core-fields">
-                <label>
+                <label className="mobile-config-card__field">
                   <span>Wochentag</span>
-                  <select value={entry.desiredWeekday || ''} onChange={(event) => onWeekdayChange(entry.id, event.target.value)}>
+                  <select className="mobile-config-card__field-value" value={entry.desiredWeekday || ''} onChange={(event) => onWeekdayChange(entry.id, event.target.value)}>
                     <option value="">Kein Wochentag</option>
                     {weekdays.map((day) => <option key={day} value={day}>{day}</option>)}
                   </select>
@@ -137,7 +141,7 @@ const MobileConfigList = ({
               <label className="mobile-config-card__check-row">
                 <input type="checkbox" checked={!!entry.onlyNotify} onChange={() => onToggleOnlyNotify(entry.id)} />
                 <span>
-                  <strong>Nur benachrichtigen</strong>
+                  <strong className="mobile-config-card__notify-label">Nur benachrichtigen</strong>
                   <small>Keinen Slot automatisch buchen</small>
                 </span>
               </label>