filter description

web/css/style.css

@@ -28,12 +28,14 @@ body {
     display: flex;
     flex-direction: column;
     gap: 8px;
+    position: relative;
 }
 
 .search-compact {
     display: flex;
     flex-direction: column;
     gap: 8px;
+    position: relative;
 }
 
 .search-compact input[type="text"] {
@@ -46,6 +48,84 @@ body {
     color: #e0e0e0;
 }
 
+.input-with-info {
+    position: relative;
+    width: 100%;
+}
+
+.input-with-info input {
+    width: 100%;
+    padding: 10px 40px 10px 10px;
+    border: 1px solid #3a3a3a;
+    border-radius: 6px;
+    font-size: 14px;
+    background: #2a2a2a;
+    color: #e0e0e0;
+}
+
+.info-icon {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: #0ea5e9;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    transition: background 0.2s;
+}
+
+.info-icon:hover {
+    background: rgba(14, 165, 233, 0.1);
+}
+
+.info-tooltip {
+    display: none;
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    background: #2a2a2a;
+    border: 1px solid #0ea5e9;
+    border-radius: 6px;
+    padding: 12px;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.info-tooltip.show {
+    display: block !important;
+}
+
+.info-tooltip-content {
+    font-size: 12px;
+    line-height: 1.5;
+    color: #e0e0e0;
+}
+
+.info-tooltip-content strong {
+    display: block;
+    color: #0ea5e9;
+    margin-bottom: 6px;
+    font-size: 13px;
+}
+
+.info-tooltip-content p {
+    margin: 6px 0;
+}
+
+.info-tooltip-content em {
+    color: #888;
+}
+
 .search-row-compact {
     display: grid;
     grid-template-columns: 1fr 1fr 70px;
@@ -63,6 +143,17 @@ body {
     min-width: 0;
 }
 
+.search-row-compact input[type="number"] {
+    position: relative;
+}
+
+.search-row-compact input[type="number"]::after {
+    content: '€';
+    position: absolute;
+    right: 8px;
+    color: #888;
+}
+
 .search-actions-compact {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -449,6 +540,20 @@ body {
         padding: 12px;
     }
 
+    .input-with-info {
+        width: 250px;
+    }
+
+    .input-with-info input {
+        width: 100%;
+    }
+
+    .info-tooltip {
+        left: 0;
+        right: auto;
+        width: 350px;
+    }
+
     .search-row-compact {
         width: auto;
         display: flex;