/* Add styles for loading indicators if needed */
       #loadingIndicator,
       #loadError {
           display: none;
           /* Hidden by default */
           color: #aaa;
           margin-top: 1rem;
           font-family: 'Roboto Mono', monospace;
           font-size: 0.9em;
       }

       #loadError {
           color: #ef5350;
           /* Red for error */
       }

       /* Ensure button container has appropriate spacing */
       #loadMoreContainer {
           text-align: center;
           margin-top: 2.5rem;
           /* Space above the button */
           margin-bottom: 1rem;
           /* Space below the button */
       }

       /* Style the button itself (inherits from .btn-base .btn-nav-action) */
       #loadMoreBtn {
           min-width: 150px;
           /* Give it some minimum width */
           /* Add specific styles here if needed, otherwise uses base classes */
       }

       /* Minor adjustments for card grid */
       .violations-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 2rem;
           /* Add padding-bottom if footer overlaps */
           padding-bottom: 1rem;
       }

       /* Ensure card images have a background color while loading or if broken */
       .violation-card img {
           background-color: #2a2a3a;
           /* Placeholder background */
           /* other styles remain the same */
           width: 100%;
           height: 220px;
           object-fit: cover;
           display: block;
           border-bottom: 1px solid #444;
       }

       /* --- Paste ALL your existing CSS from user_page.css here --- */
       /* Reset and Basic Setup */
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       html {
           scroll-behavior: smooth;
           scroll-padding-top: 70px;
           /* Adjust if navbar height changes */
           overflow-x: hidden;
           max-width: 100%;
       }

       body {
           font-family: 'IBM Plex Sans', sans-serif;
           background-color: #0a0a0a;
           color: #e0e0e0;
           line-height: 1.7;
           overflow-x: hidden;
           max-width: 100%;
           position: relative;
           display: flex;
           flex-direction: column;
           min-height: 100vh;
           scrollbar-width: none;
           /* Firefox */
           -ms-overflow-style: none;
           /* IE and Edge */
           user-select: auto;
           /* Allow text selection */
           padding-top: 70px;
           /* Fixed Navbar height */
       }

       body::-webkit-scrollbar {
           display: none;
           /* Chrome, Safari, Opera */
       }

       /* Animated Background Gradient */
       body::before {
           content: '';
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           z-index: -2;
           /* Behind particles and content */
           background: radial-gradient(ellipse at 50% 50%, rgba(131, 0, 254, 0.12) 0%, transparent 70%),
               radial-gradient(ellipse at top left, rgba(56, 189, 248, 0.1) 0%, transparent 65%),
               radial-gradient(ellipse at bottom right, rgba(131, 0, 254, 0.1) 0%, transparent 65%);
           animation: backgroundPulse 15s infinite ease-in-out alternate;
           pointer-events: none;
           /* Allow clicks through */
       }

       @keyframes backgroundPulse {
           0% {
               opacity: 0.7;
               transform: scale(1);
           }

           100% {
               opacity: 1;
               transform: scale(1.03);
           }
       }

       /* Prevent scrolling when mobile menu is open */
       body.no-scroll {
           overflow: hidden;
       }

       /* Particles Background */
       #particles-js {
           position: fixed;
           width: 100%;
           height: 100%;
           top: 0;
           left: 0;
           z-index: -1;
           /* Behind content, above gradient */
           background-color: transparent;
           pointer-events: none;
       }

       /* Navbar Styles */
       .navbar {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 70px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 0 1rem;
           /* Mobile padding */
           background: rgba(10, 10, 15, 0.75);
           backdrop-filter: blur(18px);
           -webkit-backdrop-filter: blur(18px);
           z-index: 1000;
           /* Above content */
           box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), 0 0 25px rgba(131, 0, 254, 0.2);
           border-bottom: 1px solid rgba(131, 0, 254, 0.25);
           transition: height 0.3s ease-in-out;
       }

       .navbar-logo img {
           height: 35px;
           /* Mobile logo size */
           transition: transform 0.3s ease;
           display: block;
           /* Prevent extra space below image */
       }

       .navbar-logo img:hover {
           transform: scale(1.1);
       }

       /* Desktop links are hidden by default, shown via media query if needed */
       .navbar-links {
           display: none;
           /* Add styles here if you want desktop links later */
       }

       /* Hamburger Menu Button */
       .hamburger-menu {
           color: #ffffff;
           display: block;
           /* Always show hamburger */
           background: none;
           border: none;
           cursor: pointer;
           z-index: 1050;
           /* Above navbar content, below mobile menu */
           padding: 0.5rem;
           line-height: 0;
           /* Prevent extra spacing */
       }

       .hamburger-menu svg {
           width: 28px;
           height: 28px;
           fill: #ffffff;
           /* Use fill for this SVG type */
           transition: fill 0.3s ease;
       }

       .hamburger-menu:hover svg {
           fill: #a855f7;
           /* Purple hover */
       }

       /* Mobile Navigation Menu (Off-canvas) */
       .mobile-nav-menu {
           position: fixed;
           top: 0;
           left: 0;
           width: 80%;
           max-width: 300px;
           /* Limit width on larger screens */
           height: 100vh;
           background: rgba(10, 10, 20, 0.8);
           backdrop-filter: blur(16px);
           -webkit-backdrop-filter: blur(16px);
           z-index: 1100;
           /* Above everything else */
           transform: translateX(-100%);
           opacity: 0;
           visibility: hidden;
           transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
           display: flex;
           flex-direction: column;
           padding: 6rem 2rem 2rem;
           /* Top padding to clear navbar */
           border-right: 1px solid rgba(131, 0, 254, 0.2);
           box-shadow: 5px 0 25px rgba(131, 0, 254, 0.1);
       }

       .mobile-nav-menu.active {
           transform: translateX(0);
           opacity: 1;
           visibility: visible;
           transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-in-out, visibility 0s linear 0s;
       }

       /* Mobile Menu Links (excluding logout button link) */
       .mobile-nav-menu a:not(.logout-btn-link) {
           color: #e5e7eb;
           text-decoration: none;
           font-family: 'Roboto Mono', monospace;
           font-size: 1.1rem;
           padding: 1rem 0;
           border-bottom: none;
           /* Remove individual borders */
           transition: color 0.3s ease, padding-left 0.3s ease;
           text-align: left;
           display: block;
       }

       .mobile-nav-menu a:not(.logout-btn-link):hover {
           color: #c084fc;
           /* Lighter purple hover */
           padding-left: 0.5rem;
           /* Indent on hover */
       }

       /* Logout Button Container Link */
       .mobile-nav-menu .logout-btn-link {
           margin-top: 2rem;
           /* Space above logout */
           text-align: center;
           border-bottom: none;
           padding: 1rem 0 0 0;
           /* Reset padding */
           display: block;
           border-top: none;
           /* Ensure no top border */
       }

       /* Prevent hover effects meant for text links */
       .mobile-nav-menu .logout-btn-link:hover {
           padding-left: 0;
           background-color: transparent;
           text-shadow: none;
       }

       /* Logout Button Styling within the menu */
       .mobile-nav-menu .logout-btn {
           width: 100%;
           /* Make button full width */
           padding: 0.8rem 1rem;
           font-size: 1rem;
       }

       /* Close Menu Button (X) */
       .close-menu-btn {
           color: #ffffff;
           position: absolute;
           top: 1.5rem;
           right: 1.5rem;
           background: none;
           border: none;
           cursor: pointer;
           padding: 0.25rem;
           line-height: 0;
       }

       .close-menu-btn i.lucide {
           width: 30px;
           height: 30px;
           color: #9ca3af;
           /* Gray icon */
           stroke-width: 2;
           transition: color 0.3s ease, transform 0.3s ease;
       }

       .close-menu-btn:hover i.lucide {
           color: #fff;
           /* White on hover */
           transform: rotate(90deg);
           /* Rotate effect */
       }

       /* Base Button Styles */
       .btn-base {
           display: inline-flex;
           /* Align icon and text */
           align-items: center;
           justify-content: center;
           gap: 0.6rem;
           /* Space between icon and text */
           padding: 0.7rem 1.4rem;
           border-radius: 8px;
           cursor: pointer;
           font-size: clamp(0.85rem, 1.5vw + 0.5rem, 0.95rem);
           /* Responsive font size */
           font-weight: bold;
           font-family: 'Orbitron', sans-serif;
           /* Techy font */
           transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           text-align: center;
           text-decoration: none;
           position: relative;
           /* For pseudo-elements */
           overflow: hidden;
           /* Hide pseudo-elements overflow */
           border: 2px solid transparent;
           /* Base border */
           pointer-events: auto;
           /* Ensure clickable */
           user-select: none;
           /* Prevent text selection on button */
       }

       /* Button Icon/Text Alignment */
       .btn-base span,
       .btn-base i.lucide {
           position: relative;
           z-index: 2;
           /* Above pseudo-elements */
           height: 1.1em;
           /* Consistent height */
           width: auto;
           stroke-width: 2.5;
           pointer-events: none;
           /* Prevent icon from blocking clicks */
       }

       .btn-base i.lucide {
           width: 1.1em;
           /* Consistent icon width */
       }

       /* Button Shine Effect */
       .btn-base::before {
           content: '';
           position: absolute;
           top: 0;
           left: -120%;
           width: 60%;
           height: 100%;
           background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
           transform: skewX(-25deg);
           transition: left 0.7s ease;
           z-index: 1;
           /* Below text/icon */
           pointer-events: none;
       }

       .btn-base:hover::before {
           left: 120%;
           /* Move shine across */
       }

       /* Button Active State */
       .btn-base:active {
           transform: scale(0.97);
           /* Slight shrink */
           transition-duration: 0.1s;
           /* Faster transition */
           filter: brightness(0.9);
           /* Slightly darken */
       }

       /* Navigation Action Button (Logout, Load More) */
       .btn-nav-action {
           background: transparent;
           color: #c084fc;
           /* Light purple text */
           border: 2px solid #8300fe;
           /* Main purple border */
           box-shadow: 0 0 8px rgba(131, 0, 254, 0.3);
           /* Subtle glow */
           animation: none;
           /* Override any base animations if needed */
       }

       .btn-nav-action:hover {
           background: #8300fe;
           /* Main purple background */
           color: #ffffff;
           /* White text */
           border-color: #8300fe;
           box-shadow: 0 0 15px rgba(131, 0, 254, 0.6);
           /* Brighter glow */
           transform: scale(1.03);
           /* Slight grow */
       }

       .btn-nav-action:active {
           background: #6a00d3;
           /* Darker purple */
           border-color: #6a00d3;
           transform: scale(0.98);
           /* Adjusted active scale */
           filter: brightness(0.9);
       }

       /* Disable shine effect for this specific button type */
       .btn-nav-action::before {
           display: none;
       }


       /* Main Content Area */
       main {
           flex: 1;
           /* Take remaining vertical space */
           padding-bottom: 6rem;
           /* Space above footer */
           position: relative;
           z-index: 10;
           /* Above background elements */
           width: 100%;
           max-width: 100%;
           overflow-x: hidden;
           /* Prevent horizontal scroll */
           user-select: auto;
           /* Allow text selection in main content */
       }

       .dashboard-container {
           max-width: 1400px;
           /* Max content width */
           margin: 0 auto;
           /* Center content */
           padding: 2rem 1.5rem;
           /* Vertical and horizontal padding */
       }

       /* Dashboard Header */
       .dashboard-header {
           text-align: center;
           margin-bottom: 3rem;
       }

       .dashboard-header h1 {
           font-family: 'Orbitron', sans-serif;
           font-size: clamp(2.2em, 5vw + 1em, 3em);
           /* Responsive heading */
           color: #fff;
           margin-bottom: 0.75rem;
           text-shadow: 0 0 12px rgba(168, 85, 247, 0.7);
           /* Purple glow */
       }

       .dashboard-header p {
           color: #bbb;
           font-size: clamp(0.9em, 1.5vw + 0.5em, 1em);
           /* Responsive paragraph */
           font-family: 'Roboto Mono', monospace;
           font-style: normal;
           /* Override potential browser italics */
           opacity: 0.8;
       }

       /* Stats Section Box */
       .stats-section {
           background: rgba(20, 20, 30, 0.5);
           /* Semi-transparent dark */
           backdrop-filter: blur(8px);
           -webkit-backdrop-filter: blur(8px);
           border: 1px solid rgba(131, 0, 254, 0.2);
           /* Subtle purple border */
           border-radius: 12px;
           padding: 2rem;
           margin-bottom: 3rem;
           box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
       }

       /* Stats Numbers Layout */
       .stats-numbers {
           display: flex;
           flex-wrap: wrap;
           /* Wrap items on smaller screens */
           justify-content: center;
           /* Center items when wrapped */
           gap: 1.5rem 2rem;
           /* Row and column gap */
           margin-bottom: 1.5rem;
       }

       .stat-item {
           text-align: center;
           min-width: 130px;
           /* Minimum width for each stat */
           flex: 1;
           /* Allow items to grow equally */
       }

       .stat-value {
           display: block;
           font-family: 'Orbitron', sans-serif;
           font-size: clamp(2em, 5vw, 2.8em);
           /* Responsive stat number */
           font-weight: bold;
           color: #e0e0e0;
           /* Default color */
           line-height: 1.1;
           margin-bottom: 0.2rem;
       }

       /* Status-specific colors */
       .stat-item.pending .stat-value {
           color: #ffb74d;
       }

       /* Orange */
       .stat-item.rejected .stat-value {
           color: #ef5350;
       }

       /* Red */
       .stat-item.approved .stat-value {
           color: #4db6ac;
       }

       /* Teal */
       .stat-item.total .stat-value {
           color: #a855f7;
       }

       /* Purple */

       .stat-label {
           display: block;
           font-family: 'Roboto Mono', monospace;
           font-size: clamp(0.8em, 1vw + 0.5em, 0.9em);
           /* Responsive label */
           color: #aaa;
           margin-top: 0.25rem;
           text-transform: uppercase;
       }

       /* Status Bar */
       .status-bar-container {
           margin-top: 2rem;
           /* Space above status bar */
       }

       .status-bar-label-text {
           display: block;
           text-align: center;
           font-family: 'Roboto Mono', monospace;
           font-size: 0.9em;
           color: #ccc;
           margin-bottom: 0.75rem;
       }

       .status-bar-outer {
           width: 100%;
           max-width: 600px;
           /* Limit bar width */
           margin: 0 auto;
           /* Center the bar */
           height: 22px;
           background-color: #222;
           /* Dark background */
           border-radius: 11px;
           /* Fully rounded */
           overflow: hidden;
           /* Clip inner bar */
           position: relative;
           /* For percentage text */
           border: 1px solid #444;
           /* Subtle border */
       }

       .status-bar-inner {
           height: 100%;
           background: linear-gradient(90deg, #8300fe, #a855f7);
           /* Purple gradient */
           border-radius: 11px 0 0 11px;
           /* Rounded left corners */
           transition: width 0.5s ease-out;
           /* Animate width change */
           box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
           /* Inner shadow */
       }

       /* Make fully rounded when 100% */
       .status-bar-inner[style*="width: 100%"] {
           border-radius: 11px;
       }

       /* Style for 0% width */
       .status-bar-inner[style*="width: 0%"] {
           background: none;
           /* Hide gradient if 0% */
       }


       .status-bar-percentage {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           /* Center text */
           color: #fff;
           font-size: 0.85em;
           font-weight: bold;
           text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
           /* Make text readable */
       }

       /* Violations Grid */
       .violations-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           /* Responsive grid */
           gap: 2rem;
       }

       /* Violation Card */
       .violation-card {
           background: rgba(20, 20, 30, 0.6);
           /* Semi-transparent dark */
           backdrop-filter: blur(5px);
           -webkit-backdrop-filter: blur(5px);
           border: 1px solid #444;
           /* Dark border */
           border-radius: 12px;
           overflow: hidden;
           /* Clip image corners */
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
           transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
           display: flex;
           flex-direction: column;
           /* Stack image and details */
       }

       .violation-card:hover {
           transform: translateY(-6px) scale(1.01);
           /* Lift and slightly enlarge */
           box-shadow: 0 8px 25px rgba(131, 0, 254, 0.25);
           /* Purple glow on hover */
           border-color: rgba(131, 0, 254, 0.5);
           /* Purple border on hover */
       }

       .violation-card img {
           width: 100%;
           height: 220px;
           /* Fixed image height */
           object-fit: cover;
           /* Cover the area, might crop */
           display: block;
           background-color: #222;
           /* Placeholder background */
           border-bottom: 1px solid #444;
           /* Separator line */
       }

       .violation-details {
           padding: 1.25rem;
           flex-grow: 1;
           /* Allow details to fill space if card heights differ */
       }

       .violation-details h4 {
           font-family: 'Orbitron', sans-serif;
           font-size: 1.3em;
           color: #ff8c4d;
           /* Orange-ish title */
           margin-bottom: 0.75rem;
       }

       .violation-details p {
           font-family: 'Roboto Mono', monospace;
           font-size: 0.9em;
           color: #bbb;
           margin-bottom: 0.3rem;
           line-height: 1.5;
       }

       .violation-details p strong {
           color: #fff;
           /* Make labels stand out */
           font-weight: 700;
       }

       /* Style for no violations message */
       .no-violations-message {
           grid-column: 1 / -1;
           /* Span all columns */
           text-align: center;
           padding: 3rem 1rem;
           background: rgba(20, 20, 30, 0.4);
           border: 1px dashed rgba(131, 0, 254, 0.2);
           border-radius: 12px;
           color: #aaa;
           font-family: 'Roboto Mono', monospace;
           font-size: 1.1em;
       }


       /* Footer Styles */
       footer {
           font-family: 'Roboto Mono', monospace;
           background-color: #030305;
           /* Very dark background */
           color: #9ca3af;
           /* Gray text */
           padding: 3rem 1rem 1.5rem 1rem;
           /* Top, H, Bottom padding */
           position: relative;
           /* For pseudo-elements */
           z-index: 10;
           /* Above background */
           font-size: 0.9rem;
           border-top: 1px solid #333;
           /* Separator line */
           box-shadow: 0 -4px 20px -5px rgba(131, 0, 254, 0.2);
           /* Top glow */
           overflow: hidden;
           /* Hide grid pattern overflow */
       }

       /* Footer Grid Pattern Background */
       footer::before {
           content: '';
           position: absolute;
           inset: 0;
           /* Cover entire footer */
           z-index: -1;
           /* Behind content */
           background: linear-gradient(rgba(10, 10, 20, 0.1) 1px, transparent 1px),
               linear-gradient(90deg, rgba(10, 10, 20, 0.1) 1px, transparent 1px);
           background-size: 20px 20px;
           /* Size of grid squares */
           opacity: 0.3;
           pointer-events: none;
       }

       .footer-container {
           max-width: 1200px;
           margin: 0 auto;
           /* Center footer content */
       }

       /* Footer Top Section (Logo, Desc, Social) */
       .footer-top {
           display: flex;
           flex-direction: column;
           /* Stack on mobile */
           align-items: center;
           /* Center items */
           gap: 1.5rem;
           margin-bottom: 2rem;
           padding-bottom: 2rem;
           border-bottom: 1px solid #333;
           text-align: center;
       }

       .footer-logo img {
           height: 35px;
       }

       .footer-description {
           max-width: 450px;
           /* Limit description width */
           color: #9ca3af;
           font-size: 0.85rem;
           line-height: 1.7;
       }

       .footer-social {
           display: flex;
           gap: 1.2rem;
           /* Space between icons */
       }

       .footer-social a {
           cursor: pointer;
           line-height: 0;
           /* Prevent extra space */
       }

       .footer-social a img {
           width: 20px;
           height: 20px;
           /* Start with gray icons */
           filter: invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(85%);
           transition: filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
       }

       .footer-social a:hover img {
           /* Change to purple on hover */
           filter: invert(13%) sepia(99%) saturate(6000%) hue-rotate(270deg) brightness(100%) contrast(140%);
           transform: scale(1.15);
           /* Slightly enlarge */
           box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
           /* Purple glow */
       }

       /* Footer Links Section */
       .footer-links-section {
           display: grid;
           grid-template-columns: repeat(2, 1fr);
           /* 2 columns on mobile */
           gap: 2rem 1.5rem;
           /* Row and column gap */
           margin-bottom: 2.5rem;
           text-align: left;
           /* Align text left within columns */
       }

       .footer-links-column {
           padding: 0 0.5rem;
           /* Slight padding for columns on mobile */
       }

       .footer-links-column h3 {
           font-size: 1rem;
           font-weight: 600;
           color: #e5e7eb;
           /* Lighter heading color */
           margin-bottom: 0.8rem;
           font-family: 'Orbitron', sans-serif;
           /* Match button font */
       }

       .footer-links-column nav a,
       .footer-links-column p {
           /* Style paragraphs (like contact info) similarly to links */
           display: block;
           /* Each on its own line */
           color: #9ca3af;
           text-decoration: none;
           margin-bottom: 0.5rem;
           font-size: 0.85rem;
           transition: color 0.3s ease, text-decoration 0.3s ease;
       }

       .footer-links-column nav a:hover {
           color: #bb86fc;
           /* Lighter purple hover */
           text-decoration: underline;
           text-decoration-thickness: 1px;
           text-underline-offset: 3px;
       }

       /* Footer Bottom Section (Copyright, Bottom Links) */
       .footer-bottom {
           display: flex;
           flex-direction: column;
           /* Stack on mobile */
           justify-content: center;
           align-items: center;
           padding-top: 1.5rem;
           border-top: 1px solid #333;
           font-size: 0.8rem;
           color: #888;
           /* Dimmer text */
           text-align: center;
       }

       .footer-bottom-links {
           display: flex;
           flex-wrap: wrap;
           /* Allow links to wrap */
           justify-content: center;
           gap: 1rem 1.5rem;
           /* Row and column gap */
           margin-top: 0.8rem;
           /* Space below copyright on mobile */
       }

       .footer-bottom-links a {
           color: #888;
           text-decoration: none;
           transition: color 0.3s ease;
       }

       .footer-bottom-links a:hover {
           color: #bb86fc;
           /* Lighter purple hover */
       }


       /* Medium Screens (Tablets, smaller desktops) */
       @media screen and (min-width: 768px) {
           .navbar {
               height: 70px;
               /* Keep consistent height */
               padding: 0 2.5rem;
               /* Increase horizontal padding */
           }

           .navbar-logo img {
               height: 40px;
               /* Slightly larger logo */
           }

           /* If you want desktop links, uncomment and style here */
           /* .navbar-links { display: flex; gap: 1.5rem; } */
           /* .navbar-links a { color: #e0e0e0; text-decoration: none; ... } */
           /* .hamburger-menu { display: none; } */
           /* Hide hamburger if desktop links shown */

           .dashboard-header h1 {
               font-size: 3em;
               /* Larger heading */
           }

           .stats-numbers {
               /* flex-direction: row; */
               /* Already wraps, keep flex-wrap */
               justify-content: space-around;
               /* Distribute space */
           }

           /* Footer Top Layout on Desktop */
           .footer-top {
               flex-direction: row;
               /* Horizontal layout */
               justify-content: space-between;
               /* Space out elements */
               align-items: flex-start;
               /* Align items to the top */
               text-align: left;
               /* Align text left */
           }

           .footer-logo {
               order: 1;
           }

           /* Keep logo first */
           .footer-description {
               order: 2;
               text-align: left;
               margin: 0;
           }

           /* Description second */
           .footer-social {
               order: 3;
               align-self: flex-start;
           }

           /* Social icons third, align top */

           /* Footer Links Layout on Desktop */
           .footer-links-section {
               grid-template-columns: repeat(4, 1fr);
               /* 4 columns */
               text-align: left;
           }

           .footer-links-column {
               padding: 0;
           }

           /* Remove mobile padding */

           /* Footer Bottom Layout on Desktop */
           .footer-bottom {
               flex-direction: row;
               /* Horizontal layout */
               justify-content: space-between;
               /* Space copyright and links */
               text-align: left;
           }

           .footer-bottom-links {
               margin-top: 0;
           }

           /* Remove mobile margin */
       }

       /* Large Screens (Desktops) */
       @media screen and (min-width: 1024px) {
           .navbar {
               padding: 0 4rem;
               /* Even more padding */
           }

           .navbar-logo img {
               height: 45px;
               /* Larger logo */
           }

           .dashboard-header h1 {
               font-size: 3.5em;
               /* Even larger heading */
           }

           .violations-grid {
               grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
               /* Slightly larger min card width */
               gap: 2rem;
           }
       }

       /* --- End of your existing CSS --- */