/* Player Avatars */
        .player-avatars {
            display: flex;
            flex-wrap: wrap; /* Allow avatars to wrap to the next line */
            margin-top: 8px;
            /* Tailwind classes for gap will be used on the container directly */
        }

        .player-avatar {
            position: relative;
            width: 30px; /* Slightly larger for better visibility */
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid theme('colors.white');
            box-shadow: 0 0 0 1px rgba(0,0,0,0.1); /* Keep this shadow */
            flex-shrink: 0;
            transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out, z-index 0.2s ease-in-out;
            margin-right: -12px; /* Increased overlap for a tighter stack */
            background-color: theme('colors.gray.200'); /* Placeholder for loading/missing avatar */
            z-index: 1; /* Default z-index for stacking */
        }

        .player-avatar:first-child {
            z-index: 10; /* Ensure the first avatar is on top */
        }
        .player-avatar:nth-child(2) { z-index: 9; }
        .player-avatar:nth-child(3) { z-index: 8; }
        .player-avatar:nth-child(4) { z-index: 7; }
        .player-avatar:nth-child(5) { z-index: 6; }
        .player-avatar.plus-avatar { z-index: 5; } /* Ensure + avatar is also stacked correctly */


        .player-avatar:hover {
            transform: translateY(-4px); /* More pronounced lift on hover */
            z-index: 15; /* Bring hovered avatar further to front */
        }

        /* Dark mode specific styles for player avatars */
        .dark .player-avatar {
            border-color: theme('colors.gray.800');
            background-color: theme('colors.gray.600');
            box-shadow: 0 0 0 1px rgba(255,255,255,0.1); /* Keep this shadow */
        }
        .dark .player-avatar.plus-avatar {
            background-color: theme('colors.gray.700');
            color: theme('colors.gray.200');
        }


        .player-avatar .avatar-image {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }

        /* Tooltip for player names */
        .player-avatar::after {
            content: attr(data-title);
            position: absolute;
            bottom: calc(100% + 10px); /* More space from avatar */
            left: 50%;
            transform: translateX(-50%);
            background-color: theme('colors.gray.900');
            color: theme('colors.white');
            padding: 8px 12px; /* Larger padding */
            border-radius: 8px; /* More rounded */
            font-size: 0.8rem; /* Slightly larger text */
            font-weight: 500; /* Medium font weight */
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, visibility 0.2s;
            pointer-events: none;
            z-index: 20; /* Ensure tooltip is above everything */
            box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Keep this shadow */
        }
        /* Tooltip arrow */
        .player-avatar::before {
            content: '';
            position: absolute;
            bottom: calc(100% + 5px); /* Connects to the tooltip */
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 10px; /* Larger arrow */
            height: 10px;
            background-color: theme('colors.gray.900');
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, visibility 0.2s;
            pointer-events: none;
            z-index: 19; /* Below tooltip, above avatar */
        }

        .player-avatar:hover::after,
        .player-avatar:hover::before {
            opacity: 1;
            visibility: visible;
        }

        /* +Number Avatar styling */
        .player-avatar.plus-avatar {
            border: 2px dashed theme('colors.gray.400'); /* Dashed border */
            background-color: theme('colors.gray.100');
            color: theme('colors.gray.600');
            font-size: 0.9rem; /* Slightly larger text for +number */
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .dark .player-avatar.plus-avatar {
            border-color: theme('colors.gray.600');
            background-color: theme('colors.gray.700');
            color: theme('colors.gray.300');
        }

        /* Server Icon */
        .server-icon {
            width: 28px; /* Slightly larger icons */
            height: 28px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 12px; /* More spacing */
            border-radius: 4px; /* Slight rounding for icons if they are images */
        }

        /* Custom Status Classes (Overall Status Indicator) */
        .status-up { background-color: #22c55e; /* green-500 */ }
        .status-down { background-color: #ef4444; /* red-500 */ }
        .status-maintenance { background-color: #f59e0b; /* amber-500 */ }

        .status-operational { color: #16a34a; /* green-600 */ } /* Text color for "Operational" */
        .status-down-text { color: #dc2626; /* red-600 */ }     /* Text color for "Down" */
        .status-maintenance-text { color: #d97706; /* amber-600 */ } /* Text color for "Maintenance" */

        /* Individual Service Item Status (based on JS classes) */
        .list-group-item-success { background-color: #d1fae5; } /* green-100 */
        .dark .list-group-item-success { background-color: #064e3b; } /* green-900 */

        .list-group-item-danger { background-color: #fee2e2; } /* red-100 */
        .dark .list-group-item-danger { background-color: #7f1d1d; } /* red-900 */

        .list-group-item-maintenance { background-color: #fffbeb; } /* amber-100 */
        .dark .list-group-item-maintenance { background-color: #78350f; } /* amber-900 */

        /* Flex utilities for status items */
        .d-flex { display: flex; }
        .justify-content-between { justify-content: space-between; }
        .align-items-center { align-items: center; }
        .flex-grow-1 { flex-grow: 1; }

        /* General spacing for info details in status items */
        .info-details {
            margin-top: 8px;
            font-size: 0.875rem; /* text-sm */
            color: #4b5563; /* gray-600 */
        }
        .dark .info-details {
            color: #d1d5db; /* gray-300 */
        }

        /* Ensure list styling is consistent */
        ul.list-disc ul.list-disc { /* Nested lists */
            list-style-type: circle; /* Smaller bullet for sub-lists */
            margin-left: 1rem;
        }

        /* Hero Section Specific Styles - New */
        .hero-section-gradient {
            position: relative;
            overflow: hidden;
            background: linear-gradient(to bottom, theme('colors.blue.50'), theme('colors.blue.100'));
        }
        .dark .hero-section-gradient {
            background: linear-gradient(to bottom, theme('colors.gray.900'), theme('colors.gray.800'));
        }

        /* Pulsating circle for the hero section background (keep as is) */
        .hero-section-gradient::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%); /* Subtle white glow for light mode */
            transform: translate(-50%, -50%) scale(0.1);
            animation: background-pulse 4s infinite cubic-bezier(0.66, 0, 0.34, 1);
            z-index: 0;
        }
        .dark .hero-section-gradient::after {
            background: radial-gradient(circle, rgba(66, 153, 225, 0.1) 0%, rgba(66, 153, 225, 0) 70%); /* Subtle blue glow for dark mode */
        }

        @keyframes background-pulse {
            0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0.2; }
            100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
        }

        /* Overall Status Indicator Bar */
        #overall-status-indicator-bar {
            /* Initial state, color will be set by JS */
            background-color: theme('colors.gray.400');
        }

        /* Colors for the indicator bar */
        #overall-status-indicator-bar.status-up { background-color: #22c55e; } /* green-500 */
        #overall-status-indicator-bar.status-down { background-color: #ef4444; } /* red-500 */
        #overall-status-indicator-bar.status-maintenance { background-color: #f59e0b; } /* amber-500 */
        #overall-status-indicator-bar.status-unknown { background-color: #6b7280; } /* gray-500 */

        /* Main status phrase text color (reusing existing) */
        #main-status-phrase.status-operational-text { color: #22c55e; }
        #main-status-phrase.status-down-text { color: #ef4444; }
        #main-status-phrase.status-maintenance-text { color: #f59e0b; }
        #main-status-phrase.status-unknown-text { color: #6b7280; } /* For unknown status */

        /* Removed all specific shadow overrides, only player avatar/tooltip shadows should remain from global rule */
        header, footer, .main-content-wrapper, .service-card, .service-card-status-pill {
            box-shadow: none !important;
        }

        /* Main content wrapper - New Design */
        .main-content-wrapper {
            background-color: theme('colors.white');
            border: 1px solid theme('colors.gray.200');
            box-shadow: none; /* Ensure no shadows */
        }
        .dark .main-content-wrapper {
            background-color: theme('colors.gray.800');
            border: 1px solid theme('colors.gray.700');
            box-shadow: none; /* Ensure no shadows */
        }

        /* Service Cards - New Design */
        .service-card {
            background-color: theme('colors.white');
            border: 1px solid theme('colors.gray.200');
            transition: all 0.2s ease-in-out;
        }
        .dark .service-card {
            background-color: theme('colors.gray.700');
            border-color: theme('colors.gray.600');
        }
        .service-card:hover {
            transform: translateY(-4px);
            border-color: theme('colors.blue.500'); /* Highlight border on hover */
        }
        .dark .service-card:hover {
            border-color: theme('colors.blue.400');
        }

        .service-card-status-pill {
            font-size: 0.75rem;
            padding: 0.25rem 0.6rem;
            min-width: 80px;
            text-align: center;
            border-radius: 9999px;
            font-weight: 600;
            color: white;
            box-shadow: none; /* Explicitly remove shadow */
        }