/* Responsive and Beautified Table Styling */

/* General container styling */
.container.custom-container {
    padding: 15px;
}

.card {
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Add gap between the card and the table */
.card + .table-responsive {
    margin-top: 15px;
}

/* Table styling */
#health, #technology {
    font-size: 12px;
    line-height: 1.4;
    border-collapse: collapse;
    width: 100%;
    margin-top: 10px;
    background-color: #ffffff;
}

#health th, #health td, #technology th, #technology td {
    padding: 8px;
    border: 1px solid #e0e0e0;
    text-align: left;
    vertical-align: middle;
}

/* Zebra striping for better readability */
#health tbody tr:nth-child(odd),
#technology tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

/* Table header */
#health th, #technology th {
    background-color: #f2f2f2;
    font-weight: bold;
    text-transform: uppercase;
}

/* Adjust logo size */
#health img, #technology img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

/* Buttons */
#health button, #technology button {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 4px;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    #health, #technology {
        font-size: 10px;
        line-height: 1.2;
    }

    #health th, #health td, #technology th, #technology td {
        padding: 6px;
    }

    #health img, #technology img {
        width: 18px;
        height: 18px;
    }

    #health button, #technology button {
        font-size: 10px;
        padding: 3px 7px;
    }

    .card {
        padding: 10px;
    }
}

/* General table styling */
.table {
    font-size: 20px !important; /* Small font size for all tables */
    line-height: 1.2 !important; /* Reduced line height */
}

/* Inner table styling (segments, price, count) */
.table-sm th, 
.table-sm td {
    padding: 4px !important; /* Smaller padding for compact design */
    font-size: 11px !important; /* Smaller font size for inner tables */
}

/* Logo styling */
td img.rounded-circle {
    height: 25px !important; /* Smaller height for the logo */
    width: 25px !important; /* Smaller width for the logo */
    margin-bottom: 5px !important; /* Add some spacing below the logo */
}

/* Center-align table data */
.text-center {
    text-align: center !important;
}

/* Adjust table for mobile responsiveness */
@media (max-width: 768px) {
    .table {
        font-size: 10px !important; /* Further reduce font size for small screens */
        line-height: 1.1 !important; /* Reduce line height further */
    }

    td img.rounded-circle {
        height: 20px !important; /* Smaller logo for mobile */
        width: 20px !important;
    }

    .table-sm th, 
    .table-sm td {
        padding: 3px !important; /* Compact padding for smaller screens */
        font-size: 10px !important; /* Compact font size for mobile */
    }

    td strong {
        font-size: 11px !important; /* Adjust font size for industry name */
    }

    .pb-20 {
        padding-bottom: 10px !important; /* Adjust padding for better spacing */
    }
}

/* Add horizontal scrolling for mobile if needed */
.table-responsive {
    overflow-x: auto !important; /* Enable horizontal scrolling on mobile */
}