fix: DockerSecretsResolver - don't normalize absolute paths like /var/www/html/...

resources/css/admin/06-components/_popover.css

@@ -0,0 +1,173 @@
+/**
+ * Popover Component - Admin Interface
+ *
+ * Native Popover API für Dropdown-Menüs und Overlays.
+ * Baseline 2025: Popover API ist Baseline Newly available.
+ *
+ * Features:
+ * - Native Browser-Support (kein JavaScript nötig für Basis-Funktionalität)
+ * - Automatisches Focus-Management
+ * - ESC-Key Support (native)
+ * - Backdrop-Click Support (native)
+ * - View Transition Integration für Popover-Transitions
+ */
+
+@layer components {
+    /**
+     * Popover Base
+     */
+    [popover] {
+        position: fixed;
+        inset: 0;
+        width: fit-content;
+        height: fit-content;
+        margin: auto;
+        border: 1px solid var(--border-light);
+        border-radius: var(--radius-md);
+        background-color: var(--content-bg);
+        box-shadow: var(--shadow-lg);
+        padding: var(--spacing-sm);
+        z-index: var(--z-popover);
+        color: var(--content-text);
+
+        /* Hide by default (popover API handles visibility) */
+        &:not(:popover-open) {
+            display: none;
+        }
+
+        /* View Transition für Popover-Öffnen/Schließen */
+        &::backdrop {
+            background-color: rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(2px);
+            transition: opacity var(--transition-base), backdrop-filter var(--transition-base);
+        }
+    }
+
+    /**
+     * Admin Popover Styles
+     */
+    .admin-popover {
+        min-width: 200px;
+        max-width: 320px;
+        padding: var(--spacing-xs) 0;
+        background-color: var(--content-bg);
+        border: 1px solid var(--border-light);
+        border-radius: var(--radius-md);
+        box-shadow: var(--shadow-lg);
+        overflow: hidden;
+
+        /* Positionierung */
+        &--bottom-start {
+            top: auto;
+            bottom: 0;
+            left: 0;
+            right: auto;
+        }
+
+        &--bottom-end {
+            top: auto;
+            bottom: 0;
+            left: auto;
+            right: 0;
+        }
+
+        &--top-start {
+            top: 0;
+            bottom: auto;
+            left: 0;
+            right: auto;
+        }
+
+        &--top-end {
+            top: 0;
+            bottom: auto;
+            left: auto;
+            right: 0;
+        }
+    }
+
+    /**
+     * Popover Content (Menu Lists)
+     */
+    .admin-popover ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .admin-popover li {
+        margin: 0;
+    }
+
+    /**
+     * Popover Links/Buttons
+     */
+    .admin-popover a,
+    .admin-popover button {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-sm);
+        width: 100%;
+        padding: var(--spacing-xs) var(--spacing-md);
+        border: none;
+        background: transparent;
+        color: var(--content-text);
+        text-decoration: none;
+        font-size: var(--font-size-sm);
+        cursor: pointer;
+        transition: background-color var(--transition-base);
+
+        &:hover,
+        &:focus {
+            background-color: var(--hover-overlay);
+            outline: none;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--focus-ring);
+            outline-offset: -2px;
+        }
+    }
+
+    /**
+     * Popover Divider
+     */
+    .admin-popover hr {
+        margin: var(--spacing-xs) 0;
+        border: none;
+        border-top: 1px solid var(--border-light);
+    }
+
+    /**
+     * Popover Animation (View Transitions)
+     */
+    @view-transition {
+        navigation: auto;
+    }
+
+    @view-transition-group(popover) {
+        animation-duration: var(--transition-base);
+        animation-timing-function: ease-in-out;
+    }
+
+    /**
+     * Dark Theme Optimizations
+     */
+    @media (prefers-color-scheme: dark) {
+        [popover] {
+            background-color: var(--content-bg);
+            border-color: var(--border-light);
+            box-shadow: var(--shadow-lg);
+
+            &::backdrop {
+                background-color: rgba(0, 0, 0, 0.5);
+            }
+        }
+
+        .admin-popover a:hover,
+        .admin-popover button:hover {
+            background-color: oklch(from var(--content-bg) calc(l + 0.08) c h);
+        }
+    }
+}
+