:root {
            --bg-dark: #111827;
            --card-bg: #1f2937;
            --text-primary: #f3f4f6;
            --text-secondary: #9ca3af;
            --accent-green: #4ade80;
            --accent-red: #ef4444;
        }


        .dashboard-card {
            background-color: var(--card-bg);
            padding: 1.5rem; /* Further reduced padding */
            border-radius: 1rem;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            max-width: 16rem; /* Further reduced max-width */
            width: 100%;
            text-align: center;
            margin: 0 auto;
        }
        
        .dashboard-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.75rem; /* Further reduced margin */
        }

        .icon-svg {
            color: var(--accent-green);
            width: 2rem; /* Further reduced icon size */
            height: 2rem;
        }
        
        .dashboard-title {
            font-size: 1.25rem; /* Further reduced font size */
            line-height: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }
        
        .dashboard-subtitle {
            color: var(--text-secondary);
            margin-bottom: 1rem; /* Further reduced margin */
            font-size: 0.8rem; /* Smaller font for subtitle */
        }

        /* Dynamic content area styling */
        .content-area {
            min-height: 80px; /* Further reduced height */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .message-count-display {
            font-size: 2.5rem; /* Further reduced font size */
            line-height: 1;
            font-weight: 900;
            color: var(--accent-green);
        }

        .error-box {
            color: var(--accent-red);
            font-weight: 500;
        }

        /* Loading spinner animation */
        .spinner {
            border: 3px solid rgba(255, 255, 255, 0.2);
            border-top: 3px solid #ffffff;
            border-radius: 50%;
            width: 24px; /* Further reduced spinner size */
            height: 24px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Responsive adjustments for larger screens */
        @media (min-width: 768px) {
            .dashboard-card {
                padding: 2rem;
                max-width: 20rem; /* Slightly larger on desktop */
            }
            .dashboard-title {
                font-size: 1.5rem;
            }
            .message-count-display {
                font-size: 3rem;
            }
            .icon-svg {
                width: 2.5rem;
                height: 2.5rem;
            }
        }


        
/* Target the class specifically within a DataTable context */
table.dataTable td.phone-numbers-column {
    /* Resets the default 'nowrap' often found in DataTables */
    white-space: normal !important; 
    
    /* Forces the text to behave as a block with a set width */
    min-width: 450px !important;
    max-width: 500px !important;
    
    /* Increases space between lines for the 'block' look */
    line-height: 2.2 !important;
    
    /* Adds spacing between numbers so they don't look like one long string */
    word-spacing: 12px !important;
    
    /* Ensures the cell aligns to the top if other cells have more text */
    vertical-align: top !important;
    
    /* Helps break long strings if there are no spaces after commas */
    word-break: break-word;
}

/* Optional: Ensure the header stays aligned with the column */
table.dataTable th.phone-numbers-column {
    text-align: left;
}