:root {
    --blue: #2563eb;
    --blue-dark: #1e40af;
    --sage: #9caf88;
    --sage-soft: #eef5ea;
    --green: #2f855a;
    --bg: #f5f8fb;
    --card: #ffffff;
    --text: #102033;
    --muted: #667085;
    --border: #e5e7eb;
    --danger: #dc2626;
    --shadow: 0 16px 40px rgba(31, 41, 55, 0.08);
    --radius: 18px;
}

* {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: Inter, Segoe UI, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

a {
    text-decoration: none;
}

.page-center {
    width: 100%;
    min-height: 100vh;
    padding: 34px 22px;
}

.page-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

.form-page-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.clean-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.clean-topbar h1 {
    margin: 0;
    font-size: 25px;
    letter-spacing: -0.04em;
}

.clean-topbar p,
.card-subtitle {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.card,
.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}

.card {
    padding: 22px;
    margin-bottom: 22px;
    max-width: 100%;
    overflow: hidden;
}

.compact-card {
    padding: 20px;
}

.card-header {
    margin-bottom: 16px;
}

.card-header h2 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.03em;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #344054;
    font-weight: 700;
    font-size: 13px;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: var(--text);
    transition: .2s;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

textarea {
    min-height: 105px;
    resize: vertical;
}

.btn-primary,
.btn-secondary,
.btn-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 16px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s;
    min-height: 46px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--blue), var(--green));
    color: #fff;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .22);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-logout:hover {
    transform: translateY(-1px);
}

.btn-secondary {
    background: #edf2f7;
    color: #334155;
}

.btn-logout {
    background: #fff5f5;
    color: var(--danger);
    border: 1px solid #fecaca;
}

.btn-search {
    min-width: 165px;
}

.filter-form {
    display: grid;
    grid-template-columns: 210px 260px 180px;
    gap: 16px;
    align-items: end;
}

.center-filter {
    justify-content: start;
}

.form-group {
    margin-bottom: 0;
}

.filter-button {
    margin-bottom: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card {
    padding: 22px;
    min-height: 110px;
}

.stat-card span {
    color: var(--muted);
    font-size: 13px;
}

.stat-card strong {
    display: block;
    margin-top: 10px;
    font-size: 30px;
    letter-spacing: -0.04em;
    color: #3344aa;
}

.chart-wrap {
    width: 100%;
    height: 320px;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--sage-soft);
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
}

.map-link {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--sage-soft);
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
}

.last-data-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 16px;
    -webkit-overflow-scrolling: touch;
}

.last-data-table {
    width: max-content;
    min-width: 1250px;
    border-collapse: collapse;
}

.last-data-table th {
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    text-align: left;
    padding: 14px;
    border-bottom: 1px solid var(--border);
}

.last-data-table td {
    padding: 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: normal;
}

.last-data-table td small {
    color: var(--muted);
    line-height: 1.45;
}

.last-data-table th:nth-child(1),
.last-data-table td:nth-child(1) { width: 130px; }
.last-data-table th:nth-child(2),
.last-data-table td:nth-child(2) { width: 130px; }
.last-data-table th:nth-child(3),
.last-data-table td:nth-child(3) { width: 210px; }
.last-data-table th:nth-child(4),
.last-data-table td:nth-child(4) { width: 210px; }
.last-data-table th:nth-child(5),
.last-data-table td:nth-child(5) { width: 150px; }
.last-data-table th:nth-child(6),
.last-data-table td:nth-child(6) { width: 130px; }
.last-data-table th:nth-child(7),
.last-data-table td:nth-child(7) { width: 110px; }
.last-data-table th:nth-child(8),
.last-data-table td:nth-child(8) { width: 120px; }
.last-data-table th:nth-child(9),
.last-data-table td:nth-child(9) { width: 160px; }
.last-data-table th:nth-child(10),
.last-data-table td:nth-child(10) { width: 160px; }

.photo-cell {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
}

.photo-link {
    display: inline-block;
    width: 78px;
    height: 62px;
    overflow: hidden;
    border-radius: 12px;
}

.photo-thumb {
    width: 78px !important;
    height: 62px !important;
    max-width: 78px !important;
    max-height: 62px !important;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    border: 1px solid var(--border);
    box-shadow: 0 6px 16px rgba(31, 41, 55, .10);
}

.last-data-scroll::-webkit-scrollbar {
    height: 8px;
}

.last-data-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 999px;
}

.last-data-scroll::-webkit-scrollbar-thumb {
    background: var(--sage);
    border-radius: 999px;
}

.last-data-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--green);
}

.action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    transition: .2s;
}

.btn-action.detail {
    background: var(--sage-soft);
    color: var(--green);
}

.btn-action.edit {
    background: #eff6ff;
    color: #1d4ed8;
}

.form-card-centered {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.field-note {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
}

.input-action {
    display: flex;
    gap: 10px;
}

.input-action input {
    flex: 1;
}

.btn-secondary.compact {
    white-space: nowrap;
    padding-left: 16px;
    padding-right: 16px;
}

.form-actions {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.alert-error,
.alert-success {
    padding: 13px 15px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
}

@media (max-width: 1000px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-form {
        grid-template-columns: 1fr;
    }

    .btn-search {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .page-center {
        padding: 20px 14px;
    }

    .clean-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .topbar-actions,
    .topbar-actions a {
        width: 100%;
    }

    .stats-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions a,
    .form-actions button {
        width: 100%;
    }

    .input-action {
        flex-direction: column;
    }

    .chart-wrap {
        height: 280px;
    }

    .last-data-table {
        min-width: 1150px;
    }
}

/* ===== Final update: header hijau muda, tombol rapi, detail/edit/data center ===== */
.dashboard-header,
.page-soft-header {
    background: linear-gradient(135deg, #eef8ec, #f7fbf4);
    border: 1px solid #dfeee1;
    border-radius: 24px;
    padding: 22px 26px;
    box-shadow: 0 16px 40px rgba(47, 133, 90, 0.08);
}

.dashboard-header h1,
.page-soft-header h1 {
    color: #153822;
}

.dashboard-header p,
.page-soft-header p {
    color: #52665b;
}

.topbar-actions .btn-primary,
.topbar-actions .btn-secondary,
.topbar-actions .btn-logout {
    min-width: 132px;
    height: 46px;
    padding: 0 18px;
    border-radius: 16px;
    white-space: nowrap;
}

.btn-primary,
.btn-secondary,
.btn-logout,
.btn-action,
.map-link {
    text-align: center;
    line-height: 1.2;
}

.data-filter-form {
    grid-template-columns: 160px 210px minmax(260px, 1fr) 170px;
}

.header-with-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.data-potensi-table {
    min-width: 1420px;
}

.data-potensi-table th:nth-child(1),
.data-potensi-table td:nth-child(1) { width: 130px; }
.data-potensi-table th:nth-child(2),
.data-potensi-table td:nth-child(2) { width: 130px; }
.data-potensi-table th:nth-child(3),
.data-potensi-table td:nth-child(3) { width: 220px; }
.data-potensi-table th:nth-child(4),
.data-potensi-table td:nth-child(4) { width: 210px; }
.data-potensi-table th:nth-child(5),
.data-potensi-table td:nth-child(5) { width: 150px; }
.data-potensi-table th:nth-child(6),
.data-potensi-table td:nth-child(6) { width: 130px; }
.data-potensi-table th:nth-child(7),
.data-potensi-table td:nth-child(7) { width: 140px; }
.data-potensi-table th:nth-child(8),
.data-potensi-table td:nth-child(8) { width: 110px; }
.data-potensi-table th:nth-child(9),
.data-potensi-table td:nth-child(9) { width: 120px; }
.data-potensi-table th:nth-child(10),
.data-potensi-table td:nth-child(10) { width: 160px; }
.data-potensi-table th:nth-child(11),
.data-potensi-table td:nth-child(11) { width: 160px; }

.detail-card-centered,
.form-card-centered {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.detail-item {
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #f8fafc;
}

.detail-item.full {
    grid-column: 1 / -1;
}

.detail-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 7px;
    font-weight: 700;
}

.detail-item strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

.detail-photo {
    display: block;
    width: 100%;
    max-width: 540px;
    max-height: 420px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    margin-top: 12px;
}

.current-photo-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.current-photo-box small {
    color: var(--muted);
    line-height: 1.4;
}

@media (max-width: 1000px) {
    .data-filter-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .dashboard-header,
    .page-soft-header {
        padding: 20px;
        border-radius: 20px;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .topbar-actions .btn-primary,
    .topbar-actions .btn-secondary,
    .topbar-actions .btn-logout {
        width: 100%;
        min-width: 100%;
    }

    .current-photo-box {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Floating success toast */
.floating-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    min-width: 280px;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border: 1px solid #bbf7d0;
    box-shadow: 0 18px 45px rgba(22, 101, 52, 0.18);
    color: #166534;
    animation: toastSlideIn 0.35s ease;
}

.toast-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #22c55e;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

.toast-text {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.floating-toast.hide {
    animation: toastSlideOut 0.45s ease forwards;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateY(-12px) translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
    to {
        opacity: 0;
        transform: translateY(-12px) translateX(18px);
    }
}

@media (max-width: 600px) {
    .floating-toast {
        left: 16px;
        right: 16px;
        top: 18px;
        min-width: unset;
        max-width: unset;
    }
}

/* =====================================================
   FINAL FIX STAT CARD DASHBOARD
   Card statistik melebar rapi 4 kolom
   Icon berada di sebelah angka/counting
   Aman untuk HTML lama maupun HTML dengan .stat-count-row
===================================================== */

.stats-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 0 24px 0 !important;
    align-items: stretch !important;
}

.stats-grid .stat-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 126px !important;
    padding: 24px 26px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 16px 40px rgba(31, 41, 55, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;

    display: grid !important;
    grid-template-columns: 46px auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
        "label label"
        "icon number" !important;
    column-gap: 12px !important;
    row-gap: 14px !important;
    align-items: center !important;
    justify-content: stretch !important;
}

.stats-grid .stat-card span {
    grid-area: label !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--muted) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}

.stats-grid .stat-card .stat-icon {
    grid-area: icon !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ecfdf5 !important;
    color: #14532d !important;
    box-shadow: inset 0 0 0 1px rgba(20, 83, 45, 0.08) !important;
    transition: transform 0.2s ease !important;
}

.stats-grid .stat-card strong {
    grid-area: number !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 34px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    color: #14532d !important;
    font-weight: 900 !important;
}

/* Jika HTML sudah memakai wrapper .stat-count-row, wrapper dibuat transparan ke grid */
.stats-grid .stat-count-row {
    display: contents !important;
}

/* Matikan dekorasi lingkaran lama yang dapat mengganggu posisi */
.stats-grid .stat-card::after {
    display: none !important;
    content: none !important;
}

.stats-grid .stat-card:hover .stat-icon {
    transform: scale(1.04) !important;
}

/* Warna icon per card */
.stats-grid .stat-total .stat-icon {
    background: #eef8ec !important;
    color: #14532d !important;
}

.stats-grid .stat-minat .stat-icon {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.stats-grid .stat-tidak-minat .stat-icon {
    background: #fef2f2 !important;
    color: #991b1b !important;
}

.stats-grid .stat-hari-ini .stat-icon {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

@media (max-width: 1000px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .stats-grid .stat-card {
        min-height: 112px !important;
        padding: 20px !important;
        grid-template-columns: 42px auto !important;
    }

    .stats-grid .stat-card strong {
        font-size: 30px !important;
    }

    .stats-grid .stat-card .stat-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        font-size: 18px !important;
    }
}

/* =====================================================
   FINAL CACHE-SAFE BUTTON + HEADER DARK GREEN
===================================================== */
.dashboard-header,
.page-soft-header {
    background: linear-gradient(135deg, #14532d, #1f5b32) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}

.dashboard-header h1,
.dashboard-header p,
.page-soft-header h1,
.page-soft-header p {
    color: #ffffff !important;
}

.dashboard-header p,
.page-soft-header p {
    opacity: 0.9 !important;
}

.btn-logout,
.topbar-actions .btn-logout {
    background: linear-gradient(135deg, #14532d, #166534) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(20, 83, 45, .22) !important;
}

.btn-logout:hover,
.topbar-actions .btn-logout:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 34px rgba(20, 83, 45, .28) !important;
}

/* =====================================================
   FINAL OVERRIDE BENAR: STAT CARD DASHBOARD
   Penyebab tampilan kecil sebelumnya: .stats-grid sempat dibuat nested.
   CSS ini mengunci card statistik agar selalu 4 kolom rapi.
===================================================== */
.centered-stats.stats-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 0 24px 0 !important;
    align-items: stretch !important;
}

.centered-stats.stats-grid > .stat-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 126px !important;
    padding: 24px 26px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 16px 40px rgba(31, 41, 55, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.centered-stats.stats-grid > .stat-card > span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--muted) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}

.centered-stats.stats-grid .stat-count-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 14px !important;
    width: 100% !important;
}

.centered-stats.stats-grid .stat-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ecfdf5 !important;
    color: #14532d !important;
    box-shadow: inset 0 0 0 1px rgba(20, 83, 45, 0.08) !important;
    transition: transform 0.2s ease !important;
}

.centered-stats.stats-grid strong {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 34px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    color: #14532d !important;
    font-weight: 900 !important;
}

.centered-stats.stats-grid > .stat-card::after {
    display: none !important;
    content: none !important;
}

.centered-stats.stats-grid > .stat-card:hover .stat-icon {
    transform: scale(1.04) !important;
}

.centered-stats.stats-grid .stat-total .stat-icon {
    background: #eef8ec !important;
    color: #14532d !important;
}

.centered-stats.stats-grid .stat-minat .stat-icon {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.centered-stats.stats-grid .stat-tidak-minat .stat-icon {
    background: #fef2f2 !important;
    color: #991b1b !important;
}

.centered-stats.stats-grid .stat-hari-ini .stat-icon {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

@media (max-width: 1000px) {
    .centered-stats.stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .centered-stats.stats-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .centered-stats.stats-grid > .stat-card {
        min-height: 112px !important;
        padding: 20px !important;
    }

    .centered-stats.stats-grid strong {
        font-size: 30px !important;
    }

    .centered-stats.stats-grid .stat-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        font-size: 18px !important;
    }
}
/* =====================================================
   FIX FINAL WARNA TOMBOL DARK GREEN
   Semua tombol utama kembali hijau gelap
===================================================== */

.btn-primary,
.btn-search,
.topbar-actions .btn-primary,
.topbar-actions .btn-secondary,
.topbar-actions .btn-logout,
.dashboard-header .btn-primary,
.dashboard-header .btn-secondary,
.dashboard-header .btn-logout,
.page-soft-header .btn-primary,
.page-soft-header .btn-secondary,
.page-soft-header .btn-logout {
    background: linear-gradient(135deg, #14532d, #166534) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(20, 83, 45, 0.24) !important;
}

.btn-primary:hover,
.btn-search:hover,
.topbar-actions .btn-primary:hover,
.topbar-actions .btn-secondary:hover,
.topbar-actions .btn-logout:hover,
.dashboard-header .btn-primary:hover,
.dashboard-header .btn-secondary:hover,
.dashboard-header .btn-logout:hover,
.page-soft-header .btn-primary:hover,
.page-soft-header .btn-secondary:hover,
.page-soft-header .btn-logout:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 34px rgba(20, 83, 45, 0.30) !important;
}

/* Tombol secondary biasa di luar header tetap netral */
.form-actions .btn-secondary,
.card .btn-secondary:not(.compact) {
    background: #edf2f7 !important;
    color: #334155 !important;
    box-shadow: none !important;
}

/* Tombol Data Potensi, Input Data, Logout di header dibuat seragam */
.topbar-actions a,
.dashboard-header .topbar-actions a,
.page-soft-header .topbar-actions a {
    min-width: 150px !important;
    height: 48px !important;
    border-radius: 18px !important;
    font-weight: 800 !important;
}

/* =====================================================
   FIX DATA POTENSI FILTER, PAGING, ROW HOVER
===================================================== */

/* Filter data potensi agar sebaris di desktop */
.data-filter-form {
    display: grid !important;
    grid-template-columns: 150px 170px minmax(260px, 1fr) 145px 160px 160px 150px !important;
    gap: 16px !important;
    align-items: end !important;
}

.data-filter-form .form-group {
    margin-bottom: 0 !important;
}

.data-filter-form input,
.data-filter-form select {
    height: 46px !important;
}

/* Checkbox filter tanggal agar rapi */
.date-check-group {
    display: flex !important;
    align-items: end !important;
    padding-bottom: 0 !important;
}

.check-label {
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #14532d !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.check-label input {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 !important;
    accent-color: #14532d !important;
}

.date-filter-field input:disabled {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}

/* Tombol cari tetap sejajar */
.data-filter-form .btn-primary,
.data-filter-form .btn-search {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
}

/* Responsive filter */
@media (max-width: 1200px) {
    .data-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .data-filter-form {
        grid-template-columns: 1fr !important;
    }
}


/* =====================================================
   FIX ROW PER HALAMAN + PAGING SEBARIS
===================================================== */

.pagination-wrapper {
    width: 100% !important;
    margin-top: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.pagination-left {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
}

.pagination-info {
    color: var(--muted) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.limit-form {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

.limit-form label {
    margin: 0 !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.limit-form select {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 7px 30px 7px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.pagination-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.page-btn {
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 9px 13px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    color: #14532d !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    transition: .2s !important;
}

.page-btn:hover {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    transform: translateY(-1px) !important;
}

.page-btn.active {
    background: linear-gradient(135deg, #14532d, #166534) !important;
    color: #ffffff !important;
    border-color: #14532d !important;
    box-shadow: 0 10px 22px rgba(20, 83, 45, 0.18) !important;
}

@media (max-width: 700px) {
    .pagination-wrapper {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .pagination-left {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .limit-form {
        justify-content: space-between !important;
        width: 100% !important;
    }

    .pagination-buttons {
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .page-btn {
        flex: 1 !important;
    }
}


/* =====================================================
   FIX HOVER ROW DASHBOARD & DATA POTENSI
===================================================== */

.last-data-table tbody tr,
.data-potensi-table tbody tr {
    cursor: pointer !important;
    transition: background-color .18s ease, box-shadow .18s ease !important;
}

.last-data-table tbody tr:hover,
.data-potensi-table tbody tr:hover {
    background: #f0fdf4 !important;
}

.last-data-table tbody tr:hover td,
.data-potensi-table tbody tr:hover td {
    background: #f0fdf4 !important;
}

.last-data-table tbody tr:hover strong,
.data-potensi-table tbody tr:hover strong {
    color: #14532d !important;
}

.last-data-table tbody tr:hover .badge,
.data-potensi-table tbody tr:hover .badge,
.last-data-table tbody tr:hover .map-link,
.data-potensi-table tbody tr:hover .map-link {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.last-data-table tbody tr:hover .btn-action.detail,
.data-potensi-table tbody tr:hover .btn-action.detail {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.last-data-table tbody tr:hover .btn-action.edit,
.data-potensi-table tbody tr:hover .btn-action.edit {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

/* =====================================================
   FIX KHUSUS FILTER DATA POTENSI
   Tidak mengubah bagian lain
===================================================== */

.data-filter-form {
    display: grid !important;
    grid-template-columns: 170px 180px minmax(280px, 1fr) 210px 170px 170px 170px !important;
    gap: 16px !important;
    align-items: end !important;
}

.data-filter-form .form-group {
    margin-bottom: 0 !important;
}

.data-filter-form label {
    margin-bottom: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #344054 !important;
}

.data-filter-form input,
.data-filter-form select {
    height: 48px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
}

/* Checkbox Filter Tanggal dibuat rapi */
.data-filter-form .date-check-group {
    display: flex !important;
    align-items: end !important;
}

.data-filter-form .check-label {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 16px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    border: 1px solid var(--border) !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    color: #14532d !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.data-filter-form .check-label input {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #14532d !important;
}

/* Tanggal disabled tetap rapi */
.data-filter-form .date-filter-field input:disabled {
    background: #f1f5f9 !important;
    color: #98a2b3 !important;
    cursor: not-allowed !important;
}

/* Tombol Cari Data sejajar dan tidak kepotong */
.data-filter-form .filter-button {
    display: flex !important;
    align-items: end !important;
}

.data-filter-form .filter-button .btn-primary,
.data-filter-form .btn-primary,
.data-filter-form .btn-search {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    padding: 0 20px !important;
    white-space: nowrap !important;
}

/* Tablet */
@media (max-width: 1300px) {
    .data-filter-form {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .data-filter-form {
        grid-template-columns: 1fr !important;
    }

    .data-filter-form .check-label,
    .data-filter-form .filter-button .btn-primary,
    .data-filter-form .btn-primary,
    .data-filter-form .btn-search {
        width: 100% !important;
    }
}

/* =====================================================
   FIX KHUSUS FILTER DATA POTENSI
   Tidak mengubah login, dashboard, tabel, atau card lain
===================================================== */

.card .data-filter-form {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns:
        130px
        150px
        minmax(240px, 1fr)
        170px
        145px
        145px
        140px !important;
    gap: 14px !important;
    align-items: end !important;
    overflow: visible !important;
}

.card .data-filter-form .form-group {
    margin: 0 !important;
    min-width: 0 !important;
}

.card .data-filter-form label {
    margin-bottom: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #344054 !important;
    line-height: 1.2 !important;
}

.card .data-filter-form input,
.card .data-filter-form select {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    padding: 10px 13px !important;
}

/* Filter tanggal dibuat sejajar seperti input */
.card .data-filter-form .date-check-group {
    display: flex !important;
    align-items: end !important;
}

.card .data-filter-form .check-label {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #14532d !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.card .data-filter-form .check-label input {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #14532d !important;
}

/* Tanggal disabled tetap rapi */
.card .data-filter-form .date-filter-field input:disabled {
    background: #f1f5f9 !important;
    color: #98a2b3 !important;
    cursor: not-allowed !important;
}

/* Tombol cari jangan sampai kepotong */
.card .data-filter-form .filter-button {
    display: flex !important;
    align-items: end !important;
    min-width: 0 !important;
}

.card .data-filter-form .filter-button .btn-primary,
.card .data-filter-form .btn-search {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
    font-size: 14px !important;
}

/* Kalau layar desktop sedang, otomatis jadi 2 baris rapi */
@media (max-width: 1350px) {
    .card .data-filter-form {
        grid-template-columns:
            150px
            170px
            minmax(280px, 1fr)
            180px !important;
    }

    .card .data-filter-form .date-filter-field {
        grid-column: span 1 !important;
    }

    .card .data-filter-form .filter-button {
        grid-column: span 1 !important;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .card .data-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .card .data-filter-form {
        grid-template-columns: 1fr !important;
    }

    .card .data-filter-form .check-label,
    .card .data-filter-form .filter-button .btn-primary,
    .card .data-filter-form .btn-search {
        width: 100% !important;
    }
}

/* =====================================================
   FINAL LOGIN RAPI - KHUSUS HALAMAN LOGIN
   Scope: hanya body.login-body supaya form lain tidak berubah
===================================================== */

body.login-body {
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(34, 197, 94, 0.16), transparent 34%),
        radial-gradient(circle at 88% 92%, rgba(156, 175, 136, 0.18), transparent 32%),
        linear-gradient(135deg, #f5f8fb 0%, #eef7ef 100%) !important;
}

.login-body .login-wrapper {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
}

.login-body .login-card {
    width: 100% !important;
    padding: 34px 32px 30px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(20, 83, 45, 0.10) !important;
    border-radius: 30px !important;
    box-shadow: 0 28px 75px rgba(15, 23, 42, 0.14) !important;
    backdrop-filter: blur(10px) !important;
}

.login-body .brand-badge {
    width: 62px !important;
    height: 62px !important;
    margin: 0 auto 18px !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #14532d, #166534) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    box-shadow: 0 18px 36px rgba(20, 83, 45, 0.30) !important;
}

.login-body h1 {
    margin: 0 !important;
    color: #102033 !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
    text-align: center !important;
}

.login-body .subtitle {
    margin: 10px auto 28px !important;
    max-width: 320px !important;
    color: #667085 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

.login-body form {
    width: 100% !important;
}

.login-body label {
    margin: 0 0 8px !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.login-body input[type="text"],
.login-body input[type="password"] {
    width: 100% !important;
    height: 50px !important;
    margin: 0 0 14px !important;
    padding: 12px 15px !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #102033 !important;
    font-size: 14px !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03) !important;
}

.login-body input[type="text"]:focus,
.login-body input[type="password"]:focus {
    border-color: #166534 !important;
    box-shadow: 0 0 0 4px rgba(22, 101, 52, 0.12) !important;
}

.login-body .btn-primary.full,
.login-body button[type="submit"] {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    margin-top: 4px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #14532d, #166534) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    border: none !important;
    box-shadow: 0 16px 34px rgba(20, 83, 45, 0.26) !important;
}

.login-body .btn-primary.full:hover,
.login-body button[type="submit"]:hover {
    background: linear-gradient(135deg, #0f3d24, #22c55e) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 42px rgba(20, 83, 45, 0.34) !important;
}

.login-body .helper-text {
    margin: 18px 0 0 !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
    background: #f0fdf4 !important;
    color: #14532d !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    text-align: center !important;
    border: 1px solid #dcfce7 !important;
}

.login-body .alert-error {
    margin: 0 0 18px !important;
    padding: 13px 15px !important;
    border-radius: 15px !important;
    background: #fee2e2 !important;
    color: #991b1b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: center !important;
}

@media (max-width: 520px) {
    body.login-body {
        padding: 16px !important;
    }

    .login-body .login-card {
        padding: 28px 22px 24px !important;
        border-radius: 24px !important;
    }

    .login-body .brand-badge {
        width: 56px !important;
        height: 56px !important;
        border-radius: 18px !important;
    }

    .login-body h1 {
        font-size: 24px !important;
    }
}

/* =====================================================
   FINAL LOGIN RAPI - KHUSUS HALAMAN LOGIN
   Scope: hanya body.login-body supaya form lain tidak berubah
===================================================== */

body.login-body {
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(34, 197, 94, 0.16), transparent 34%),
        radial-gradient(circle at 88% 92%, rgba(156, 175, 136, 0.18), transparent 32%),
        linear-gradient(135deg, #f5f8fb 0%, #eef7ef 100%) !important;
}

.login-body .login-wrapper {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
}

.login-body .login-card {
    width: 100% !important;
    padding: 34px 32px 30px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(20, 83, 45, 0.10) !important;
    border-radius: 30px !important;
    box-shadow: 0 28px 75px rgba(15, 23, 42, 0.14) !important;
    backdrop-filter: blur(10px) !important;
}

.login-body .brand-badge {
    width: 62px !important;
    height: 62px !important;
    margin: 0 auto 18px !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #14532d, #166534) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    box-shadow: 0 18px 36px rgba(20, 83, 45, 0.30) !important;
}

.login-body h1 {
    margin: 0 !important;
    color: #102033 !important;
    font-size: 28px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
    text-align: center !important;
}

.login-body .subtitle {
    margin: 10px auto 28px !important;
    max-width: 320px !important;
    color: #667085 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

.login-body form {
    width: 100% !important;
}

.login-body label {
    margin: 0 0 8px !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.login-body input[type="text"],
.login-body input[type="password"] {
    width: 100% !important;
    height: 50px !important;
    margin: 0 0 14px !important;
    padding: 12px 15px !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #102033 !important;
    font-size: 14px !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03) !important;
}

.login-body input[type="text"]:focus,
.login-body input[type="password"]:focus {
    border-color: #166534 !important;
    box-shadow: 0 0 0 4px rgba(22, 101, 52, 0.12) !important;
}

.login-body .btn-primary.full,
.login-body button[type="submit"] {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    margin-top: 4px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #14532d, #166534) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    border: none !important;
    box-shadow: 0 16px 34px rgba(20, 83, 45, 0.26) !important;
}

.login-body .btn-primary.full:hover,
.login-body button[type="submit"]:hover {
    background: linear-gradient(135deg, #0f3d24, #22c55e) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 42px rgba(20, 83, 45, 0.34) !important;
}

.login-body .helper-text {
    margin: 18px 0 0 !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
    background: #f0fdf4 !important;
    color: #14532d !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    text-align: center !important;
    border: 1px solid #dcfce7 !important;
}

.login-body .alert-error {
    margin: 0 0 18px !important;
    padding: 13px 15px !important;
    border-radius: 15px !important;
    background: #fee2e2 !important;
    color: #991b1b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: center !important;
}

@media (max-width: 520px) {
    body.login-body {
        padding: 16px !important;
    }

    .login-body .login-card {
        padding: 28px 22px 24px !important;
        border-radius: 24px !important;
    }

    .login-body .brand-badge {
        width: 56px !important;
        height: 56px !important;
        border-radius: 18px !important;
    }

    .login-body h1 {
        font-size: 24px !important;
    }
}

/* =====================================================
   FIX FINAL PENCARIAN DATA POTENSI - TETAP 1 BARIS
   Hanya untuk menu pencarian Data Potensi
   Tidak mengubah tampilan form lain
===================================================== */

.filter-card.card.compact-card {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 20px 22px !important;
}

.filter-card .data-filter-form {
    width: 100% !important;
    min-width: 1220px !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns:
        115px
        145px
        minmax(240px, 1fr)
        160px
        145px
        145px
        160px !important;

    gap: 12px !important;
    align-items: end !important;
}

.filter-card .data-filter-form .form-group {
    margin: 0 !important;
    min-width: 0 !important;
}

.filter-card .data-filter-form label {
    height: 18px !important;
    margin: 0 0 8px 0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 18px !important;
    color: #344054 !important;
    white-space: nowrap !important;
}

.filter-card .data-filter-form input,
.filter-card .data-filter-form select {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 10px 13px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
}

/* Checkbox Filter Tanggal tetap sejajar dengan field lain */
.filter-card .data-filter-form .date-check-group {
    display: flex !important;
    align-items: end !important;
    align-self: end !important;
}

.filter-card .data-filter-form .check-label {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #14532d !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.filter-card .data-filter-form .check-label input {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #14532d !important;
}

.filter-card .data-filter-form .date-filter-field input:disabled {
    background: #f1f5f9 !important;
    color: #98a2b3 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* Tombol Cari Data tetap sejajar dan tidak terlalu lebar */
.filter-card .data-filter-form .filter-button {
    display: flex !important;
    flex-direction: column !important;
    justify-content: end !important;
    align-self: end !important;
}

.filter-card .data-filter-form .filter-button label {
    visibility: hidden !important;
}

.filter-card .data-filter-form .filter-button .btn-primary,
.filter-card .data-filter-form .filter-button .btn-search {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* Di layar kecil tetap 1 baris, tapi bisa digeser horizontal */
@media (max-width: 1300px) {
    .filter-card.card.compact-card {
        overflow-x: auto !important;
    }

    .filter-card .data-filter-form {
        min-width: 1220px !important;
        grid-template-columns:
            115px
            145px
            260px
            160px
            145px
            145px
            160px !important;
    }
}


/* =====================================================
   FINAL HOVER SEMUA TOMBOL
   Hanya efek saat cursor diarahkan ke tombol/menu.
   Tidak mengubah logic, struktur PHP, query, atau tampilan normal form.
===================================================== */

/* Transisi halus, tidak mengubah warna normal */
.btn-primary,
.btn-secondary,
.btn-logout,
.btn-search,
.btn-action,
.map-link,
.page-btn,
.nav-link,
.admin-menu-button,
.admin-dropdown a,
.topbar-actions a,
.form-actions a,
.form-actions button,
button[type="submit"],
button[type="button"],
input[type="submit"] {
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.20s ease,
        filter 0.20s ease !important;
}

/* Tombol utama: Data Potensi, Input Data, Cari Data, Simpan, Update */
.btn-primary:hover,
.btn-search:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.topbar-actions .btn-primary:hover,
.dashboard-header .btn-primary:hover,
.page-soft-header .btn-primary:hover {
    background: linear-gradient(135deg, #0f3d24, #22c55e) !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.018) !important;
    box-shadow:
        0 20px 42px rgba(20, 83, 45, 0.34),
        0 0 0 4px rgba(34, 197, 94, 0.10) !important;
    filter: saturate(1.08) !important;
}

/* Tombol secondary: Dashboard, Kembali, Batal */
.btn-secondary:hover,
.topbar-actions .btn-secondary:hover,
.dashboard-header .btn-secondary:hover,
.page-soft-header .btn-secondary:hover,
.form-actions .btn-secondary:hover,
.card .btn-secondary:hover {
    background: linear-gradient(135deg, #ecfdf5, #dbeafe) !important;
    color: #14532d !important;
    border-color: #bbf7d0 !important;
    transform: translateY(-3px) scale(1.015) !important;
    box-shadow:
        0 16px 32px rgba(20, 83, 45, 0.16),
        0 0 0 4px rgba(20, 83, 45, 0.07) !important;
}

/* Tombol logout dibuat beda jelas */
.btn-logout:hover,
.topbar-actions .btn-logout:hover,
.dashboard-header .btn-logout:hover,
.page-soft-header .btn-logout:hover {
    background: linear-gradient(135deg, #7f1d1d, #ef4444) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-3px) scale(1.018) !important;
    box-shadow:
        0 20px 42px rgba(220, 38, 38, 0.30),
        0 0 0 4px rgba(239, 68, 68, 0.10) !important;
}

/* Tombol Detail */
.btn-action.detail:hover,
a.btn-action.detail:hover {
    background: linear-gradient(135deg, #dcfce7, #86efac) !important;
    color: #14532d !important;
    transform: translateY(-2px) scale(1.055) !important;
    box-shadow:
        0 12px 24px rgba(22, 101, 52, 0.18),
        0 0 0 3px rgba(34, 197, 94, 0.10) !important;
}

/* Tombol Edit */
.btn-action.edit:hover,
a.btn-action.edit:hover {
    background: linear-gradient(135deg, #dbeafe, #93c5fd) !important;
    color: #1e3a8a !important;
    transform: translateY(-2px) scale(1.055) !important;
    box-shadow:
        0 12px 24px rgba(37, 99, 235, 0.20),
        0 0 0 3px rgba(59, 130, 246, 0.10) !important;
}

/* Tombol Maps */
.map-link:hover {
    background: linear-gradient(135deg, #bbf7d0, #4ade80) !important;
    color: #064e3b !important;
    transform: translateY(-2px) scale(1.045) !important;
    box-shadow:
        0 10px 20px rgba(22, 101, 52, 0.18),
        0 0 0 3px rgba(34, 197, 94, 0.10) !important;
}

/* Tombol pagination */
.page-btn:hover {
    background: linear-gradient(135deg, #ecfdf5, #bbf7d0) !important;
    color: #14532d !important;
    border-color: #86efac !important;
    transform: translateY(-2px) scale(1.035) !important;
    box-shadow:
        0 10px 22px rgba(22, 101, 52, 0.14),
        0 0 0 3px rgba(34, 197, 94, 0.08) !important;
}

/* Menu dropdown/admin bila ada */
.admin-menu-button:hover,
.nav-link:hover,
.admin-dropdown a:hover {
    background: linear-gradient(135deg, #ecfdf5, #dcfce7) !important;
    color: #14532d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px rgba(20, 83, 45, 0.12) !important;
}

/* Foto rumah saat disorot, agar terlihat clickable */
.photo-link:hover .photo-thumb,
.photo-thumb:hover {
    transform: scale(1.045) !important;
    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.18),
        0 0 0 3px rgba(34, 197, 94, 0.12) !important;
    transition:
        transform 0.20s ease,
        box-shadow 0.25s ease !important;
}

/* Efek klik terasa responsif */
.btn-primary:active,
.btn-secondary:active,
.btn-logout:active,
.btn-search:active,
.btn-action:active,
.map-link:active,
.page-btn:active,
button[type="submit"]:active,
button[type="button"]:active {
    transform: translateY(0) scale(0.985) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12) !important;
}

/* Jangan beri efek pada tombol disabled */
button:disabled,
button:disabled:hover,
input[type="submit"]:disabled,
input[type="submit"]:disabled:hover,
.btn-primary.disabled,
.btn-secondary.disabled,
.btn-logout.disabled {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}


/* =====================================================
   FINAL PATCH: DASHBOARD CARD + HOVER DATA POTENSI
   Catatan:
   - Tidak mengubah logic PHP / query / Chart.js.
   - Dashboard.php dan potensi_data.php tetap aman.
   - Patch ini hanya override tampilan CSS.
===================================================== */

/* =====================================================
   1) FIX CARD STATISTIK DASHBOARD
   Aman untuk struktur lama yang memiliki .stats-grid di dalam .centered-stats
===================================================== */
.centered-stats.stats-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 0 24px 0 !important;
    align-items: stretch !important;
}

/* Jika di dalam section masih ada wrapper .stats-grid, paksa melebar full */
.centered-stats.stats-grid > .stats-grid {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 !important;
    align-items: stretch !important;
}

/* Card statistik, baik direct child maupun di dalam wrapper nested */
.centered-stats.stats-grid > .stat-card,
.centered-stats.stats-grid > .stats-grid > .stat-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 126px !important;
    padding: 24px 26px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 16px 40px rgba(31, 41, 55, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.centered-stats.stats-grid > .stat-card > span,
.centered-stats.stats-grid > .stats-grid > .stat-card > span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--muted) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}

.centered-stats.stats-grid .stat-count-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 14px !important;
    width: 100% !important;
}

.centered-stats.stats-grid .stat-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ecfdf5 !important;
    color: #14532d !important;
    box-shadow: inset 0 0 0 1px rgba(20, 83, 45, 0.08) !important;
    transition: transform 0.2s ease, box-shadow 0.25s ease !important;
}

.centered-stats.stats-grid strong {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 34px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    color: #14532d !important;
    font-weight: 900 !important;
}

.centered-stats.stats-grid .stat-card::after {
    display: none !important;
    content: none !important;
}

.centered-stats.stats-grid .stat-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 22px 48px rgba(31, 41, 55, 0.12) !important;
}

.centered-stats.stats-grid .stat-card:hover .stat-icon {
    transform: scale(1.06) !important;
    box-shadow: 0 10px 22px rgba(20, 83, 45, 0.12) !important;
}

.centered-stats.stats-grid .stat-total .stat-icon {
    background: #eef8ec !important;
    color: #14532d !important;
}

.centered-stats.stats-grid .stat-minat .stat-icon {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.centered-stats.stats-grid .stat-tidak-minat .stat-icon {
    background: #fef2f2 !important;
    color: #991b1b !important;
}

.centered-stats.stats-grid .stat-hari-ini .stat-icon {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

@media (max-width: 1000px) {
    .centered-stats.stats-grid,
    .centered-stats.stats-grid > .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .centered-stats.stats-grid,
    .centered-stats.stats-grid > .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .centered-stats.stats-grid > .stat-card,
    .centered-stats.stats-grid > .stats-grid > .stat-card {
        min-height: 112px !important;
        padding: 20px !important;
    }

    .centered-stats.stats-grid strong {
        font-size: 30px !important;
    }

    .centered-stats.stats-grid .stat-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        font-size: 18px !important;
    }
}

/* =====================================================
   2) HOVER TOMBOL DATA POTENSI DISAMAKAN DENGAN DASHBOARD
===================================================== */
.btn-primary,
.btn-secondary,
.btn-logout,
.btn-search,
.btn-action,
.map-link,
.page-btn,
.topbar-actions a,
button[type="submit"],
input[type="submit"] {
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.20s ease,
        filter 0.20s ease !important;
}

/* Hijau terang + glow: tombol utama dashboard dan data potensi */
.btn-primary:hover,
.btn-search:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.topbar-actions .btn-primary:hover,
.dashboard-header .btn-primary:hover,
.page-soft-header .btn-primary:hover,
.filter-card .btn-primary:hover,
.filter-card .btn-search:hover {
    background: linear-gradient(135deg, #0f3d24, #22c55e) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-3px) scale(1.018) !important;
    box-shadow:
        0 20px 42px rgba(20, 83, 45, 0.34),
        0 0 0 4px rgba(34, 197, 94, 0.10) !important;
    filter: saturate(1.08) !important;
}

/* Tombol menu Dashboard di halaman Data Potensi dibuat hover hijau juga agar seragam */
.page-soft-header .topbar-actions .btn-secondary:hover,
.dashboard-header .topbar-actions .btn-secondary:hover {
    background: linear-gradient(135deg, #0f3d24, #22c55e) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-3px) scale(1.018) !important;
    box-shadow:
        0 20px 42px rgba(20, 83, 45, 0.30),
        0 0 0 4px rgba(34, 197, 94, 0.10) !important;
}

/* Logout merah saat hover */
.btn-logout:hover,
.topbar-actions .btn-logout:hover,
.dashboard-header .btn-logout:hover,
.page-soft-header .btn-logout:hover {
    background: linear-gradient(135deg, #7f1d1d, #ef4444) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-3px) scale(1.018) !important;
    box-shadow:
        0 20px 42px rgba(220, 38, 38, 0.30),
        0 0 0 4px rgba(239, 68, 68, 0.10) !important;
}

/* Detail hijau soft */
.btn-action.detail:hover,
a.btn-action.detail:hover {
    background: linear-gradient(135deg, #dcfce7, #86efac) !important;
    color: #14532d !important;
    transform: translateY(-2px) scale(1.055) !important;
    box-shadow:
        0 12px 24px rgba(22, 101, 52, 0.18),
        0 0 0 3px rgba(34, 197, 94, 0.10) !important;
}

/* Edit biru soft */
.btn-action.edit:hover,
a.btn-action.edit:hover {
    background: linear-gradient(135deg, #dbeafe, #93c5fd) !important;
    color: #1e3a8a !important;
    transform: translateY(-2px) scale(1.055) !important;
    box-shadow:
        0 12px 24px rgba(37, 99, 235, 0.20),
        0 0 0 3px rgba(59, 130, 246, 0.10) !important;
}

/* Maps hijau terang */
.map-link:hover {
    background: linear-gradient(135deg, #bbf7d0, #4ade80) !important;
    color: #064e3b !important;
    transform: translateY(-2px) scale(1.045) !important;
    box-shadow:
        0 10px 20px rgba(22, 101, 52, 0.18),
        0 0 0 3px rgba(34, 197, 94, 0.10) !important;
}

/* Pagination/menu lain efek halus */
.page-btn:hover,
.nav-link:hover,
.admin-dropdown a:hover {
    background: linear-gradient(135deg, #ecfdf5, #bbf7d0) !important;
    color: #14532d !important;
    border-color: #86efac !important;
    transform: translateY(-2px) scale(1.035) !important;
    box-shadow:
        0 10px 22px rgba(22, 101, 52, 0.14),
        0 0 0 3px rgba(34, 197, 94, 0.08) !important;
}

/* Efek klik */
.btn-primary:active,
.btn-secondary:active,
.btn-logout:active,
.btn-search:active,
.btn-action:active,
.map-link:active,
.page-btn:active,
button[type="submit"]:active,
button[type="button"]:active {
    transform: translateY(0) scale(0.985) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12) !important;
}