/* CSS Grid Layout */
    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.75rem;
    }

    .grid-card {
        height: 125px;
        border-radius: 8px;
        border: 1px solid #e9ecef;
        transition: all 0.1s ease-in-out;
        cursor: pointer;
        background: white;
        position: relative;
        overflow: visible;
    }

    .grid-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 10;
    }

    .grid-card:active {
    /*box-shadow: 5px 5px 5px rgba(87, 177, 255, 1);*/
    box-shadow: 5px 0px 5px rgba(145, 225, 138, 1), 0 5px 5px rgba(87, 177, 255, 1);
    border-radius: 10px;
    border: 1px solid lightgray;
    margin-top: 0px;
    margin-bottom: 0px;
}

    .grid-number {
        font-size: 3rem;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 4px;
    }

    .grid-number-two-on-screen {
        font-size: 4rem;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 4px;
    }

    .grid-title {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.1;
    }

    /* Color classes */
    .status-green { color: #739c39; }
    .status-red { color: #D2222D; }
    .status-yellow { color: #FFBF00; }
    .status-gray { color: #6c757d; }

    /* Hover tooltip */
    .hover-tooltip {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 0.8rem;
        line-height: 1.4;
        opacity: 0;
        visibility: hidden;
        transition: all 0.1s ease-in-out;
        z-index: 1000;
        margin-top: 8px;
        width: 280px;
        text-align: left;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .hover-tooltip::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-bottom-color: #333;
    }

        /* Hover tooltip */
    .right-hover-tooltip {
        position: absolute;
        left: 100%; /* Position to the right of the parent */
        top: 50%; /* Center vertically */
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 0.8rem;
        line-height: 1.4;
        opacity: 0;
        visibility: hidden;
        transition: all 0.1s ease-in-out;
        z-index: 1000;
        margin-top: 8px;
        width: 280px;
        text-align: left;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .right-hover-tooltip::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-bottom-color: #333;
    }

    .grid-card:hover .hover-tooltip {
        opacity: 1;
        visibility: visible;
    }

    .grid-card:hover .right-hover-tooltip {
        opacity: 1;
        visibility: visible;
    }

    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .grid-container {
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        }

        .grid-card {
            height: 90px;
        }

        .grid-number {
            font-size: 1.5rem;
        }
    }