feat: update UI components and styles for improved user experience

- Removed obsolete PDF file from the mock directory.
- Updated index.html to change the favicon and title for the application.
- Deleted unused vite.svg file and replaced it with shapes.svg.
- Enhanced App component layout and styling.
- Refined Form1 component with better spacing and updated styles.
- Improved Form2 component to enhance item selection UI and responsiveness.
- Updated Form4 component to improve loan display and interaction.
- Enhanced Header component styling for better visibility.
- Refined LoginForm component for a more modern look.
- Updated Object component styles for better text visibility.
- Improved Sidebar component layout and item display.
- Updated global CSS for better touch target improvements.
- Enhanced Layout component for better responsiveness and structure.
- Updated main.tsx to change toast notification theme.
- Updated tailwind.config.js to include index.html for Tailwind CSS processing.

frontend/src/components/Sidebar.tsx

@@ -12,25 +12,25 @@ const Sidebar: React.FC = () => {
       const next = JSON.parse(localStorage.getItem("allItems") || "[]");
       setItems(next);
     };
-    // Update immediately in case data changed before this mounted
     handler();
     window.addEventListener(ALL_ITEMS_UPDATED_EVENT, handler);
     return () => window.removeEventListener(ALL_ITEMS_UPDATED_EVENT, handler);
   }, []);
 
   const outCount = items.reduce((n, it) => n + (it.inSafe ? 0 : 1), 0);
-  const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe)); // außerhalb zuerst
+  const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe));
 
   return (
-    <aside className="w-full md:w-80 md:h-screen md:sticky md:top-0 overflow-y-auto bg-white/90 backdrop-blur md:border-r border-blue-100 shadow-xl flex flex-col p-6">
-      <h2 className="text-2xl font-extrabold mb-4 text-blue-700 tracking-tight flex items-center justify-between">
+    <aside className="w-full md:w-72 md:h-[calc(100vh-2rem)] md:sticky md:top-4 overflow-y-auto bg-white rounded-2xl p-3 sm:p-4 ring-1 ring-slate-200 shadow-sm">
+      <h2 className="text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between">
         <span className="flex items-center gap-2">
           <svg
-            className="w-6 h-6 text-blue-500"
+            className="w-5 h-5 text-slate-700"
             fill="none"
             stroke="currentColor"
             strokeWidth={2}
             viewBox="0 0 24 24"
+            aria-hidden="true"
           >
             <path
               strokeLinecap="round"
@@ -41,28 +41,29 @@ const Sidebar: React.FC = () => {
           Geräte Übersicht
         </span>
         {outCount > 0 && (
-          <span className="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700">
+          <span className="text-[10px] sm:text-xs px-2 py-0.5 rounded-full bg-amber-100 text-amber-700">
             {outCount} außerhalb
           </span>
         )}
       </h2>
 
-      <div className="space-y-4 flex-1 pr-1">
+      {/* Mobile: horizontal scroll, Desktop: vertical list */}
+      <div className="flex gap-3 overflow-x-auto snap-x snap-mandatory pb-1 -mr-1 pr-2 md:block md:space-y-3 md:pr-1">
         {sorted.map((item: any) => (
           <div
             key={item.item_name}
-            className={`bg-white/80 rounded-xl p-4 shadow hover:shadow-md transition ${
-              item.inSafe ? "" : "ring-1 ring-red-200"
-            }`}
+            className={`bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200 hover:ring-slate-300 transition ${
+              item.inSafe ? "" : "ring-red-200"
+            } shrink-0 snap-start min-w-[240px] md:min-w-0`}
           >
             <div className="flex items-start gap-3">
-              <span className="relative mt-1 inline-flex" aria-hidden="true">
+              <span className="relative mt-0.5 inline-flex" aria-hidden="true">
                 {!item.inSafe && (
                   <span className="absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
                 )}
                 <span
                   className={`inline-block w-3 h-3 rounded-full ${
-                    item.inSafe ? "bg-green-400" : "bg-red-500"
+                    item.inSafe ? "bg-emerald-500" : "bg-red-500"
                   }`}
                   title={
                     item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
@@ -83,10 +84,10 @@ const Sidebar: React.FC = () => {
         ))}
       </div>
 
-      <div className="mt-6 text-xs text-gray-400 flex items-center gap-4">
-        <span className="inline-block w-3 h-3 bg-green-400 rounded-full"></span>
+      <div className="mt-3 text-[10px] sm:text-xs text-slate-500 items-center gap-4 hidden md:flex">
+        <span className="inline-block w-3 h-3 bg-emerald-500 rounded-full"></span>
         Verfügbar
-        <span className="inline-block w-3 h-3 bg-red-400 rounded-full"></span>
+        <span className="inline-block w-3 h-3 bg-red-500 rounded-full"></span>
         Außerhalb des Schließfachs
       </div>
     </aside>