.info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    cursor: pointer;
}

.info-tooltip i {
    font-size: 15px;
    color: #898781;
}

.info-tooltip:hover i {
    color: #2a78d6;
}

.tooltip-box {
    position: absolute;
    top: 130%;
    left: 0;
    z-index: 20;
    width: 280px;
    background: #1a1a18;
    color: #f5f5f3;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    padding: 12px 14px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);

    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.info-tooltip:hover .tooltip-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* little arrow pointing up to the icon */
.tooltip-box::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 14px;
    width: 10px;
    height: 10px;
    background: #1a1a18;
    transform: rotate(45deg);
}

@media (max-width: 700px) {
    .tooltip-box {
        width: 220px;
        left: -10px;
    }
}

        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: #f5f5f3;
            color: #1a1a18;
            min-height: 100vh;
        }

        .topbar {
            background: #fff;
            border-bottom: 1px solid #e2e1da;
            padding: 0 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            height: 60px;
        }

        .topbar-title {
            font-size: 15px;
            font-weight: 600;
            color: #1a1a18;
        }

        .topbar-sub {
            font-size: 13px;
            color: #898781;
        }

        .page {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1.5rem 4rem;
        }

        .page-header {
            margin-bottom: 1.5rem;
        }

        .page-heading {
            font-size: 24px;
            font-weight: 600;
        }

        .page-sub {
            font-size: 14px;
            color: #6b6b67;
            margin-top: 4px;
        }

        /* ---------- Filter bar ---------- */
        .filter-bar {
            background: #fff;
            border: 1px solid #e2e1da;
            border-radius: 12px;
            padding: 1rem 1.25rem;
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            align-items: flex-end;
            margin-bottom: 1.25rem;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .filter-group label {
            font-size: 12px;
            color: #898781;
            font-weight: 600;
        }

        .filter-select,
        .filter-input {
            font-size: 13px;
            padding: 8px 12px;
            border: 1px solid #d4d3cc;
            border-radius: 8px;
            background: #fff;
            color: #1a1a18;
            min-width: 180px;
        }

        .filter-select:focus,
        .filter-input:focus {
            outline: none;
            border-color: #2a78d6;
            box-shadow: 0 0 0 3px rgba(42, 120, 214, 0.15);
        }

        .filter-reset {
            font-size: 13px;
            padding: 8px 16px;
            border-radius: 8px;
            border: 1px solid #d4d3cc;
            background: #f5f5f3;
            color: #6b6b67;
            cursor: pointer;
        }

        .filter-reset:hover {
            background: #e2e1da;
        }

        .result-count {
            font-size: 13px;
            color: #898781;
            margin-left: auto;
            align-self: center;
        }

        /* ---------- Map card ---------- */
        .map-card {
            background: #fff;
            border: 1px solid #e2e1da;
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1.25rem;
        }

        #heatMap {
            width: 100%;
            height: 560px;
            border-radius: 8px;
        }

        .map-legend {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
            font-size: 12px;
            color: #6b6b67;
        }

        .legend-scale {
            display: flex;
            height: 10px;
            width: 160px;
            border-radius: 5px;
            overflow: hidden;
        }

        .legend-scale span {
            flex: 1;
        }

        /* ---------- Data table ---------- */
        .table-card {
            background: #fff;
            border: 1px solid #e2e1da;
            border-radius: 12px;
            overflow: hidden;
        }

        .table-card table {
            width: 100%;
            border-collapse: collapse;
        }

        .table-card th {
            font-size: 11px;
            color: #898781;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 12px 1.25rem;
            text-align: left;
            background: #fafaf8;
            border-bottom: 1px solid #e2e1da;
        }

        .table-card td {
            font-size: 13px;
            padding: 10px 1.25rem;
            border-bottom: 1px solid #f0efe8;
        }

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

        .table-card tr:hover td {
            background: #fafaf8;
        }

        .empty-state {
            text-align: center;
            padding: 2rem;
            color: #898781;
            font-size: 13px;
        }

        @media (max-width: 700px) {
            .topbar {
                padding: 0 1rem;
            }

            .page {
                padding: 1.25rem 1rem 3rem;
            }

            .filter-bar {
                flex-direction: column;
                align-items: stretch;
            }

            .filter-select,
            .filter-input {
                width: 100%;
                min-width: 0;
            }

            .result-count {
                margin-left: 0;
            }

            #heatMap {
                height: 380px;
            }
        }

       .topbar-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #1a1a18;
    font-weight: 600;
}

.topbar-logo:hover {
    color: #eda100;
}