fix: out-of-stock button styling and schedule visual cleanup (#431)

- Add distinct styling for out-of-stock dose buttons (.dose-btn.take.out-of-stock)
- Remove redundant .time-row.taken opacity dimming
- Include Playwright regression test for stock status visuals

frontend/e2e/stock-status.spec.ts

@@ -193,6 +193,37 @@ test.describe("Stock Status Levels", () => {
 		await expect(depletedRow.locator(".status-chip.danger")).toBeVisible();
 	});
 
+	test("should keep the depleted take button visually dangerous while disabled", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 10000 });
+
+		const depletedRow = todayBlock.locator(".time-row").filter({ hasText: MED_DEPLETED });
+		await expect(depletedRow).toBeVisible();
+
+		const takeButton = depletedRow.locator("button.dose-btn.take.out-of-stock");
+		await expect(takeButton).toBeDisabled();
+
+		const expectedDangerStyles = await page.evaluate(() => {
+			const probe = document.createElement("button");
+			probe.style.backgroundColor = "var(--danger)";
+			probe.style.borderColor = "var(--danger)";
+			document.body.appendChild(probe);
+			const styles = getComputedStyle(probe);
+			const result = {
+				backgroundColor: styles.backgroundColor,
+				borderTopColor: styles.borderTopColor,
+			};
+			probe.remove();
+			return result;
+		});
+
+		await expect(takeButton).toHaveCSS("opacity", "1");
+		await expect(takeButton).toHaveCSS("background-color", expectedDangerStyles.backgroundColor);
+		await expect(takeButton).toHaveCSS("border-top-color", expectedDangerStyles.borderTopColor);
+	});
+
 	test("should show days-left and runs-out date in overview", async ({ page }) => {
 		await navigateTo(page, "/dashboard");
 

frontend/src/styles.css

@@ -2618,6 +2618,22 @@ button.has-validation-error {
 	filter: none;
 }
 
+.dose-btn.take.out-of-stock,
+.dose-btn.take.out-of-stock:disabled,
+.dashboard-schedules-section .dose-btn.take.out-of-stock,
+.dashboard-schedules-section .dose-btn.take.out-of-stock:disabled,
+[data-theme="light"] .dashboard-schedules-section .dose-btn.take.out-of-stock,
+[data-theme="light"] .dashboard-schedules-section .dose-btn.take.out-of-stock:disabled,
+[data-theme="light"] .dose-btn.take.out-of-stock,
+[data-theme="light"] .dose-btn.take.out-of-stock:disabled {
+	opacity: 1;
+	background: var(--danger);
+	border-color: var(--danger);
+	color: white;
+	box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent);
+	filter: none;
+}
+
 .dose-item.future {
 	opacity: 0.5;
 }
@@ -2749,15 +2765,6 @@ button.has-validation-error {
 	color: #0f172a;
 }
 
-.time-row.taken {
-	opacity: 0.6;
-}
-
-.time-row.taken .med-name {
-	text-decoration: line-through;
-	color: var(--text-secondary);
-}
-
 .highlights {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));