body {
    .kpi-card {
        background: #152436;
        border-radius: 28px; /* Nice rounded corners */

        padding: 1.75rem;
        border: none;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        height: 100%;
        color: white;
    }

        .kpi-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.10);
        }

    .kpi-icon {
        width: 60px;
        height: 60px;
        border-radius: 20px; /* Rounded icon container */
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }

    .kpi-value {
        font-size: 3rem;
        font-weight: 700;
        line-height: 1;
    }

    .kpi-title {
        font-size: .85rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: lightsteelblue;
        font-weight: 600;
    }

    .table-container {
        background: #152436;
        border-radius: 28px;
        padding: 1rem;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(0,0,0,.06);
        color: aliceblue;
    }

    .kpi-card {
        border-radius: 28px;
    }

    .table-card {
        background: #07263D;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(0,0,0,.08);
    }

        .table-card table {
            margin-bottom: 0;
            background: #152436;
        }

        .table-card thead {
            background: #162639;
            border-bottom-color: grey;
        }

            .table-card thead th {
                border: 1px solid;
                border-color: dimgrey;
                padding: 22px;
                font-weight: 400;
                background: #152436;
                color: lightsteelblue;
            }

        .table-card tbody td {
            padding: 18px;
            vertical-align: middle;
            background: #152436;
            color: #D6DADD;
            border: 0.5px solid;
            border-color: dimgray;
        }

        .table-card tbody tr:last-child td {
            border-bottom: none;
        }

        .table-card tbody tr:hover {
            background-color: #B6D1F0;
        }

    .table-card {
        border-radius: 10px;
        padding: 10px;
        background: #152436;
    }

    .dashboard-container h3 {
        color: white;
    }

    .dashboard-container p {
        color: lightblue;
    }

    .meter-tag {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 8px; /* 👈 rounded corners (not full pill) */
        font-size: 0.85rem;
        font-weight: 600;
        border: 1.5px solid;
    }

    .Water {
        color: #0d6efd;
        border-color: #0d6efd;
        background-color: rgba(13, 110, 253, 0.10);
    }

    .Electricity {
        color: #f59f00;
        border-color: #f59f00;
        background-color: rgba(245, 159, 0, 0.10);
    }

    .Refuse {
        color: #2b8a3e;
        border-color: #2b8a3e;
        background-color: rgba(43, 138, 62, 0.10);
    }

    .app-wrapper {
        display: flex;
        min-height: 100vh;
    }
    /* Sidebar */
    .sidebar {
        width: 240px;
        background: #0D1D31;
        color: white;
        padding: 20px;
        border-radius: 10px;
        border: 0.5px solid dimgray;
    }

        .sidebar .logo {
            margin-bottom: 20px;
            font-weight: 700;
        }

        .sidebar a {
            display: block;
            padding: 10px;
            color: lightsteelblue;
            text-decoration: none;
            border-radius: 8px;
            margin-bottom: 5px;
        }

            .sidebar a:hover {
                background: #1f2937;
                color: white;
                border: 0.5px;
                border-radius: 8px;
                border-color: #2859cc;
            }
    /* Main content */
    .main-content {
        flex: 1;
        padding: 20px;
        background: #0E1620;
        border-radius: 10px
    }

    .action-cell {
        white-space: nowrap;
    }
    /* Base icon button */
    .btn-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        text-decoration: none;
        margin-right: 6px;
        transition: all 0.2s ease;
        font-size: 1rem;
    }
        /* Details (Blue Eye) */
        .btn-action.details {
            color: #0d6efd;
            background-color: rgba(13, 110, 253, 0.10);
            border: 1px solid rgba(13, 110, 253, 0.2);
        }

            .btn-action.details:hover {
                background-color: #0d6efd;
                color: white;
                transform: translateY(-2px);
            }
        /* Delete (Red Bin) */
        .btn-action.delete {
            color: #dc3545;
            background-color: rgba(220, 53, 69, 0.10);
            border: 1px solid rgba(220, 53, 69, 0.2);
        }

            .btn-action.delete:hover {
                background-color: #dc3545;
                color: white;
                transform: translateY(-2px);
            }
}