body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.dashboard {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.blink-text {
    font-weight: bold;
    color: red;
    animation: blink 1s infinite;
}

.card1, .card2, .card3, .card4 {
    border-width:thin;
    border-color: #333;
    border-style: solid;
    padding: 20px;
    border-radius: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 32%;
    height: 180px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    color: #fff !important;
    padding-bottom: 40px; /* Ensures space for <p> before footer */
}

.cardA, .cardB, .cardC, .cardD, .cardE {
    padding: 20px;
    border-width: thin;
    border-color: #333;
    border-style: solid;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 15%;
    height: 180px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding-bottom: 40px; /* Ensures space for <p> before footer */
}

.cardDa {
    padding: 20px;
    border-width: thin;
    border-color: #333;
    border-style: solid;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 15%;
    height: 180px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding-bottom: 40px; /* Ensures space for <p> before footer */
}

/* Background colors */
.card1 {
    background-color: #049396 !important;
}

.card2 {
    background-color: #337ab7 !important;
}

.card3 {
    background-color: #ee7526 !important;
}

.card4 {
    background-color: #c4b7a6 !important;
}

.cardA {
    background-color: #7d4d17 !important;
}

.cardB {
    background-color: #26aed2 !important;
}

.cardC {
    background-color: #d28126 !important;
}

.cardD {
    background-color: #5cb85c !important;
}
.cardDa {
    background-color: #367181 !important;
}
.cardE {
    background-color: #337ab7 !important;
}

    /* h3 stays at the top */
    .card1 h3, .card2 h3, .card3 h3, .card4 h3 {
        font-size: 16px;
        color: #333;
        text-align: center;
        margin: 0;
    }

.cardA h3, .cardB h3, .cardC h3, .cardD h3, .cardDa h3, .cardE h3 {
    text-align: center;
}

.cardA p, .cardB p, .cardC p, .cardD p, .cardDa p, .cardE p {
    text-align: center;
}

    /* p should be fully visible, just above the footer */
    .card1 p, .card2 p, .card3 p, .card4 p {
        font-size: 24px;
        font-weight: bold;
        color: #eee;
        text-align: right;
        margin: 0;
        margin-top: auto;
        min-height: 30px; /* Ensures text is not collapsed */
        padding-bottom: 5px; /* Prevents overlap with footer */
    }

    .cardA a, .cardB a, .cardC a, .cardD a, .cardDa a, .cardE a, .card1 a, .card2 a, .card3 a, .card4 a, .cardF a {
        color: #eee; /* Set link color to white */
        text-decoration: none; /* Remove underline */
    }

        .cardA a:hover, .cardB a:hover, .cardC a:hover, .cardD a:hover, .cardDa a:hover, .cardE a:hover, .cardF a:hover, .card1 a:hover, .card2 a:hover, .card3 a:hover, .card4 a:hover {
            color: #ddd;
        }
        /* Footer inside cards */
        .card-footer {
            width: 100%;
            text-align: center;
            padding: 10px 0;
            font-size: 14px;
            font-weight: bold;
            color: white !important;
            position: absolute;
            bottom: 0;
            left: 0;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
            cursor: pointer;
        }

/* Darker shades for footers */
.card1 .card-footer {
    background-color: #037375;
}

.card2 .card-footer {
    background-color: #286090;
}

.card3 .card-footer {
    background-color: #bf5e1f;
}

.card4 .card-footer {
    background-color: #9e8f7a;
}
.cardA .card-footer {
    background-color: #5e3a12;
}
.cardB .card-footer {
    background-color: #1c88a5;
}
.cardC .card-footer {
    background-color: #a5641e;
}
.cardD .card-footer {
    background-color: #449d44;
}
.cardDa .card-footer {
    background-color: #2a5966;
}
.cardE .card-footer {
    background-color: #286090;
}

/* Ensure single card row behaves like other rows */
.single-card {
    display: flex;
    justify-content: center; /* Centers the card horizontally */
    width: 100%;
    margin-top: 20px; /* Space from previous row */
}

/* Ensure cardF behaves correctly */
.cardF {
    border-width: thin;
    border-color: #333;
    border-style: solid;
    background-color: #67f182 !important;
    width: 300px;
    height: 130px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures p and footer stay inside */
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding-bottom: 40px; /* Ensures space for text above footer */
}

    /* Fix footer to remain inside card */
    .cardF .card-footer {
        background-color: #5eb970; /* Slightly darker for contrast */
        width: 100%;
        text-align: center;
        padding: 10px 0;
        font-size: 14px;
        font-weight: bold;
        color: white;
        position: absolute;
        bottom: 0;
        left: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        cursor: pointer;
    }

/* Chart Card */
.chart-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    width: 80%;
    max-width: 600px;
}

canvas {
    width: 100%;
    height: 300px;
}