Enhance dropdown and filter component styling

- Introduced shared global classes for dropdown and filter components in _dropdowns.scss to promote consistency and reusability.
- Updated dropdown.component.scss to utilize new global classes, reducing duplication of styles.
- Refactored time-filter-dropdown and log-filter-controls components to leverage shared styles, improving maintainability.
- Implemented best practices for component styling, including the use of global classes and avoiding @extend.
- Added slide-down animation for dropdowns and improved scrollbar styling for better user experience.

Author: Timothy Dodd

CLAUDE.md

@@ -406,6 +406,137 @@ Use provided mixins for consistent styling:
 
 This styling system ensures a consistent, maintainable, and accessible dark theme throughout the LogMk application while supporting full-width layouts optimized for log monitoring workflows.
 
+### **Shared Component Styling Guidelines**
+
+**Global Style Classes for Component Reuse:**
+When creating new components, always check `src/styles/_dropdowns.scss` for existing reusable classes before writing component-specific styles. This file contains common patterns extracted from dropdown and filter components.
+
+**Available Global Classes:**
+```scss
+// Dropdown and menu styling
+.dropdown-menu-base        // Base dropdown menu with positioning and styling
+.dropdown-item-base        // Standard dropdown item with hover states
+.category-header-base      // Collapsible category headers with icons
+.custom-scrollbar          // Consistent scrollbar styling for lists
+
+// Form controls and inputs
+.search-input-base         // Standard search input with focus states
+.search-wrapper-base       // Search wrapper with icon positioning
+.compact-control           // Compact sizing (32px height) for filter controls
+
+// Buttons and actions
+.action-btn-base           // Standard action button with hover/active/disabled states
+.count-badge-base          // Circular count badges for quantities
+.tag-base                  // Selected item tags with remove functionality
+
+// Layout utilities
+.filter-container-base     // Flex container for filter controls
+.slide-down                // Slide-down animation for expanding sections
+```
+
+**Component Styling Best Practices:**
+```scss
+// ✅ Prefer global classes over component-specific styles
+.my-component {
+  .search-section {
+    @extend .search-wrapper-base;  // Use global class
+  }
+
+  .action-button {
+    @extend .action-btn-base;      // Use global class
+    // Add only component-specific overrides if needed
+    width: 100px;
+  }
+}
+
+// ❌ Avoid duplicating common patterns
+.my-component {
+  .search-input {
+    background: var(--input-bg);  // This is already in .search-input-base
+    color: var(--on-surface);     // Duplicate styling
+    border: 1px solid var(--border-color);
+    // ... more duplicate code
+  }
+}
+```
+
+**Creating New Shared Styles:**
+When you notice styling patterns being duplicated across 2+ components:
+
+1. **Extract to `_dropdowns.scss`** (or create new shared file if different domain)
+2. **Create reusable classes** (not mixins) for direct component usage
+3. **Use mixins only** for patterns that need customization parameters
+4. **Update this documentation** with new available classes
+
+**Style Architecture Philosophy:**
+- **Global classes for common patterns** - Direct usage in components
+- **Mixins for customizable patterns** - When parameters are needed
+- **Component styles for unique behavior** - Only what's truly component-specific
+- **CSS variables for all colors** - Never hardcode colors or spacing
+
+### **Implementation Best Practices**
+
+**Template Class Usage:**
+Always apply global classes directly in HTML templates, never use `@extend` in component SCSS:
+
+```html
+<!-- ✅ Correct: Direct class usage in template -->
+<div class="dropdown-panel dropdown-menu-base">
+  <input class="search-input search-input-base compact-control" />
+  <button class="clear-btn action-btn-base" />
+</div>
+
+<!-- ❌ Avoid: Using @extend in component SCSS -->
+<!-- This requires separate CSS rules instead of direct class usage -->
+```
+
+**Component SCSS Override Pattern:**
+Use global classes as selectors for component-specific overrides:
+
+```scss
+// ✅ Correct: Override global classes for component-specific styling
+.search-input-base {
+  &.filter-search {
+    width: 100%;
+    padding-left: 28px; // Space for icon
+  }
+}
+
+.action-btn-base {
+  &.clear-filters-btn {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+// ❌ Avoid: Using @extend in component SCSS
+.filter-search {
+  @extend .search-input-base; // Don't do this
+  width: 100%;
+}
+```
+
+**Multi-Class Approach:**
+Combine global base classes with modifier classes for different variants:
+
+```html
+<!-- Base functionality + size modifier + component-specific -->
+<input class="search-input search-input-base compact-control" />
+
+<!-- Base functionality + component-specific styling -->
+<button class="action-btn action-btn-base clear-filters-btn" />
+
+<!-- Base + multiple modifiers -->
+<div class="dropdown-item dropdown-item-base action-item" />
+```
+
+**Benefits of This Approach:**
+- **Performance**: No CSS inheritance overhead from `@extend`
+- **Transparency**: Easy to see which global classes are used in templates
+- **Maintainability**: Global class changes automatically affect all components
+- **Debugging**: Clear class names in DevTools for easier inspection
+- **Consistency**: Enforces consistent styling patterns across components
+
 ## Advanced Features & Services
 
 ### **Real-time Log Processing**

src/LogMkWeb/src/app/_components/dropdown/dropdown.component.scss

@@ -42,43 +42,13 @@
     flex-wrap: wrap;
     gap: 0.25rem;
 
-    .tag {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.25rem;
-      background-color: var(--primary);
-      color: var(--on-primary);
-      padding: 0.125rem 0.375rem;
-      border-radius: 4px;
-      font-size: 0.75rem;
-      font-weight: 500;
-
-      lucide-icon {
-        cursor: pointer;
-        opacity: 0.7;
-        &:hover { opacity: 1; }
-      }
-    }
   }
 
   .selected-count {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 
-    .count-badge {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 1.5rem;
-      height: 1.5rem;
-      background-color: var(--primary);
-      color: var(--on-primary);
-      border-radius: 50%;
-      font-size: 0.75rem;
-      font-weight: 600;
-      padding: 0 0.25rem;
-    }
 
     .count-text {
       color: var(--on-surface);
@@ -99,18 +69,8 @@
       font-size: 0.875rem;
       font-weight: 500;
 
-      .count-badge {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 1.5rem;
-        height: 1.5rem;
-        background-color: var(--primary);
+      .count-badge-base {
         color: white;
-        border-radius: 50%;
-        font-size: 0.75rem;
-        font-weight: 600;
-        padding: 0 0.25rem;
       }
 
       .count-text {
@@ -136,51 +96,28 @@
 }
 
 .dropdown-panel {
-  @include dropdown-menu;
-  & {
-    position: absolute;
-    top: calc(100% + 4px);
-    left: 0;
-    width: max-content;
-    min-width: 100%;
-    max-width: 400px;
-    max-height: 500px;
-    overflow: visible;
-    z-index: 1000;
-  }
+  width: max-content;
+  max-width: 400px;
 }
 
 .dropdown-search {
-  display: flex;
-  align-items: center;
   padding: 0.5rem 0.75rem;
   border-bottom: 1px solid var(--border-color);
   background-color: var(--surface);
   position: sticky;
   top: 0;
   z-index: 10;
 
-  .search-icon {
-    flex-shrink: 0;
-    color: var(--on-surface-muted);
-    margin-right: 0.5rem;
-  }
-
-  .search-input {
+.input-icon{
+        flex-shrink: 0;
+        color: var(--on-surface-muted);
+        margin-right: .5rem;
+}
+  .search-input-base {
     flex: 1;
-    background: var(--input-bg);
-    color: var(--on-surface);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    padding: 0.375rem 0.5rem;
-    font-size: 0.875rem;
-    outline: none;
-    transition: all 0.15s ease;
-
-    &::placeholder { color: var(--on-surface-muted); }
+
+
     &:focus {
-      border-color: var(--primary);
-      box-shadow: 0 0 0 0.2rem var(--focus-ring);
       background-color: var(--surface-variant);
     }
   }
@@ -208,41 +145,9 @@
   max-height: 200px;
   overflow-y: auto;
   overflow-x: hidden;
-
-  &::-webkit-scrollbar {
-    width: 12px;
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--surface-variant);
-    border-radius: 6px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--border-color);
-    border-radius: 6px;
-    border: 2px solid var(--surface-variant);
-
-    &:hover { background: var(--on-surface-variant); }
-  }
-
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-color) var(--surface-variant);
 }
 
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  color: var(--on-surface);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  font-size: 1rem;
-
-  &:hover:not(.disabled) { background-color: var(--surface-container); }
-
+.dropdown-item-base {
   &.selected:not(.dropdown-container.multiple &) {
     background-color: var(--primary);
     color: var(--on-primary);
@@ -254,11 +159,6 @@
     }
   }
 
-  &.disabled {
-    color: var(--disabled-text);
-    cursor: not-allowed;
-  }
-
   input[type="checkbox"] {
     width: 1rem;
     height: 1rem;