.dash-bg {
    background-color: #f8f8fb;
    font-family: 'Inter', sans-serif;
    color: #495057;
}
.card {
    border-radius: 0.25rem;
    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03);
}
.card-header {
    border-bottom: 1px solid #eff2f7;
}
.mini-stat-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bg-soft {
    background-color: rgba(85, 110, 230, 0.1);
}
.bg-soft-primary {
    background-color: rgba(85, 110, 230, 0.1);
}
.bg-soft-success {
    background-color: rgba(52, 195, 143, 0.1);
}
.bg-soft-info {
    background-color: rgba(80, 165, 241, 0.1);
}
.bg-soft-warning {
    background-color: rgba(241, 180, 76, 0.1);
}
.bg-soft-danger {
    background-color: rgba(244, 106, 106, 0.1);
}

.map-container {
    background-color: #f8f8fb;
    border-radius: 0.25rem;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trend-dot:hover {
    transform: scale(1.25);
    cursor: pointer;
}
.trend-dot::after {
    content: attr(data-value) " Titik";
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #343a40;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.2s;
}
.trend-dot:hover::after {
    opacity: 1;
}

.progress-bar {
    border-radius: 50rem;
}

/* Custom Utility Classes for Colors (Tailwind-like) */
.text-stone-800 { color: #292524 !important; }
.text-stone-500 { color: #78716c !important; }

/* Emerald (Pertanian & Perkebunan) */
.bg-emerald-15 { background-color: rgba(16, 185, 129, 0.15) !important; }
.text-emerald-500 { color: #10b981 !important; }

/* Teal (Peternakan & Perikanan) */
.bg-teal-15 { background-color: rgba(20, 184, 166, 0.15) !important; }
.text-teal-500 { color: #14b8a6 !important; }

/* Orange (Pariwisata) */
.bg-orange-15 { background-color: rgba(249, 115, 22, 0.15) !important; }
.text-orange-500 { color: #f97316 !important; }

/* Fuchsia (Industri Olahan) */
.bg-fuchsia-15 { background-color: rgba(217, 70, 239, 0.15) !important; }
.text-fuchsia-500 { color: #d946ef !important; }