Fix missing CSS for page-title-with-actions and period-display-banner

Added CSS rules that were missing after restoring from older commit:
- .page-title-with-actions (flex layout for title + toggle)
- .toggle-with-label (Labels On/Off toggle styling)
- .period-display-banner (Comparison page period display)

src/components/shared/Carousel.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useState } from 'react';
+import React, { useRef, useCallback } from 'react';
 
 function Carousel({ 
   children, 
@@ -8,62 +8,25 @@ function Carousel({
   showLabels = true,
   className = ''
 }) {
-  const touchStartX = useRef(null);
-  const touchStartY = useRef(null);
-  const trackRef = useRef(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [dragOffset, setDragOffset] = useState(0);
+  const touchStart = useRef(null);
   const itemCount = React.Children.count(children);
-  
-  const SWIPE_THRESHOLD = 50;
 
   const handleTouchStart = useCallback((e) => {
-    touchStartX.current = e.touches[0].clientX;
-    touchStartY.current = e.touches[0].clientY;
-    setIsDragging(true);
-    setDragOffset(0);
+    touchStart.current = e.touches[0].clientX;
   }, []);
 
-  const handleTouchMove = useCallback((e) => {
-    if (!touchStartX.current || !isDragging) return;
-    
-    const currentX = e.touches[0].clientX;
-    const currentY = e.touches[0].clientY;
-    const diffX = currentX - touchStartX.current;
-    const diffY = Math.abs(currentY - touchStartY.current);
-    
-    // Only handle horizontal swipes (prevent vertical scroll interference)
-    if (Math.abs(diffX) > diffY) {
-      // Add resistance at edges (rubber band effect)
-      let offset = diffX;
-      if ((activeIndex === 0 && diffX > 0) || (activeIndex === itemCount - 1 && diffX < 0)) {
-        offset = diffX * 0.25;
-      }
-      setDragOffset(offset);
-    }
-  }, [isDragging, activeIndex, itemCount]);
-
   const handleTouchEnd = useCallback((e) => {
-    if (!touchStartX.current || !isDragging) return;
-    
-    const endX = e.changedTouches[0].clientX;
-    const diff = touchStartX.current - endX;
-    
-    // Change slide if swipe exceeds threshold
-    if (Math.abs(diff) > SWIPE_THRESHOLD) {
+    if (!touchStart.current) return;
+    const diff = touchStart.current - e.changedTouches[0].clientX;
+    if (Math.abs(diff) > 50) {
       if (diff > 0 && activeIndex < itemCount - 1) {
         setActiveIndex(activeIndex + 1);
       } else if (diff < 0 && activeIndex > 0) {
         setActiveIndex(activeIndex - 1);
       }
     }
-    
-    // Reset
-    touchStartX.current = null;
-    touchStartY.current = null;
-    setIsDragging(false);
-    setDragOffset(0);
-  }, [isDragging, activeIndex, setActiveIndex, itemCount]);
+    touchStart.current = null;
+  }, [activeIndex, setActiveIndex, itemCount]);
 
   const handleKeyDown = useCallback((e) => {
     if (e.key === 'ArrowLeft' && activeIndex > 0) {
@@ -73,41 +36,18 @@ function Carousel({
     }
   }, [activeIndex, setActiveIndex, itemCount]);
 
-  // Calculate transform with drag offset
-  const baseTransform = -(activeIndex * 100);
-  const dragPercentage = trackRef.current 
-    ? (dragOffset / trackRef.current.offsetWidth) * 100 
-    : 0;
-  const transform = baseTransform + dragPercentage;
-
   return (
-    <div 
-      className={`carousel ${className}`} 
-      onKeyDown={handleKeyDown} 
-      tabIndex={0}
-      role="region"
-      aria-label="Carousel"
-    >
+    <div className={`carousel ${className}`} onKeyDown={handleKeyDown} tabIndex={0}>
       <div className="carousel-container">
         <div className="carousel-viewport">
           <div 
-            ref={trackRef}
             className="carousel-track"
-            style={{ 
-              transform: `translateX(${transform}%)`,
-              transition: isDragging ? 'none' : undefined
-            }}
+            style={{ transform: `translateX(-${activeIndex * 100}%)` }}
             onTouchStart={handleTouchStart}
-            onTouchMove={handleTouchMove}
             onTouchEnd={handleTouchEnd}
           >
             {React.Children.map(children, (child, i) => (
-              <div 
-                className="carousel-slide" 
-                key={i}
-                role="tabpanel"
-                aria-hidden={activeIndex !== i}
-              >
+              <div className="carousel-slide" key={i}>
                 {child}
               </div>
             ))}