From fda92eb47b8295cc10f9459a1869fd94239d408c Mon Sep 17 00:00:00 2001
From: Florian Heinz <mail@hnz.io>
Date: Thu, 21 May 2026 19:14:03 +0200
Subject: [PATCH] Use native sleep progress and iOS delete

---
 assets/css/app.css            | 34 ++++++++++++++++++++++++++--------
 templates/pages/dashboard.php |  2 +-
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index fbd254c..7cd1747 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1009,15 +1009,31 @@ body.page-dashboard .content {
     background: rgba(255, 255, 255, 0.16);
 }
 
-.sleep-phase-bar__fill {
+.sleep-phase-bar__progress {
     position: absolute;
-    inset: 0 auto 0 0;
-    display: block;
+    inset: 0;
+    width: 100%;
     height: 100%;
-    width: var(--sleep-actual-left, 0);
-    min-width: 0.28rem;
-    max-width: 100%;
     overflow: hidden;
+    border: 0;
+    border-radius: inherit;
+    appearance: none;
+    -webkit-appearance: none;
+    background: transparent;
+}
+
+.sleep-phase-bar__progress::-webkit-progress-bar {
+    border-radius: inherit;
+    background: transparent;
+}
+
+.sleep-phase-bar__progress::-webkit-progress-value {
+    border-radius: inherit;
+    background: linear-gradient(90deg, #64d2ff, #0a84ff);
+    box-shadow: 0 0 18px rgba(10, 132, 255, 0.38);
+}
+
+.sleep-phase-bar__progress::-moz-progress-bar {
     border-radius: inherit;
     background: linear-gradient(90deg, #64d2ff, #0a84ff);
     box-shadow: 0 0 18px rgba(10, 132, 255, 0.38);
@@ -4949,10 +4965,12 @@ input[type="range"] {
         min-width: 2.85rem;
         min-height: 2.85rem;
         border-radius: 999px;
-        background: rgba(242, 242, 247, 0.92);
-        color: rgba(28, 28, 30, 0.86);
+        border-color: rgba(255, 255, 255, 0.48);
+        background: #ff3b30;
+        color: #fff;
         font-size: 1.05rem;
         font-weight: 560;
+        box-shadow: 0 10px 26px rgba(255, 59, 48, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
     }
 
     .timeline-card__delete .trash-button span {
diff --git a/templates/pages/dashboard.php b/templates/pages/dashboard.php
index a2fde42..7aabebe 100644
--- a/templates/pages/dashboard.php
+++ b/templates/pages/dashboard.php
@@ -222,7 +222,7 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
 
                                 <?php if ($eventType === 'sleep' && $sleepActualTotal > 0): ?>
                                     <div class="sleep-phase-bar" aria-label="Schlafdauer" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%; --sleep-actual-left: <?= e((string) $sleepActualPercent) ?>%">
-                                        <span class="sleep-phase-bar__fill" aria-hidden="true"></span>
+                                        <progress class="sleep-phase-bar__progress" value="<?= e((string) $sleepActualTotal) ?>" max="<?= e((string) $sleepBarTotal) ?>"><?= e(format_duration_hours($sleepActualTotal)) ?></progress>
                                         <span class="sleep-phase-bar__target"><span><?= e(format_duration_hours($optimalSleepHours)) ?></span></span>
                                     </div>
                                     <div class="sleep-phase-summary"><span><?= e(format_duration_hours($sleepActualTotal)) ?></span><span>Ziel <?= e(format_duration_hours($optimalSleepHours)) ?></span></div>