/*!
 * E-Dashboard Kabupaten: tema di atas AdminLTE 3.2
 * Setiap sektor data punya satu warna tetap yang dipakai di kartu, grafik, peta, dan menu.
 */

:root {
    --ed-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --ed-ink: #1f2d3a;
    --ed-muted: #5f6f7c;
    --ed-line: #dfe5e3;
    --ed-bg: #eef2f1;
    --ed-surface: #ffffff;
    --ed-primary: #1d5d6b;
    --ed-primary-dark: #154651;
    --ed-sidebar: #12343b;
    --ed-sidebar-2: #0d282e;
    --ed-gold: #c9a227;
    --ed-perempuan: #c46f8e;

    --sec-penduduk: #2b6f8a;
    --sec-tani: #4f7d2c;
    --sec-bantuan: #c98a1b;
    --sec-miskin: #b4483a;
    --sec-infra: #54607a;
    --sec-nelayan: #3f51a3;
    --sec-pasar: #8a4a7e;
    --sec-sagu: #8b6534;
    --sec-keuangan: #1e6b5c;
    --sec-master: #6c757d;

    /* varian terang untuk latar gelap (sidebar, halaman login) */
    --sec-penduduk-lt: #86bdd3;
    --sec-tani-lt: #a3c783;
    --sec-bantuan-lt: #eabd62;
    --sec-miskin-lt: #e39384;
    --sec-infra-lt: #aab4ca;
    --sec-nelayan-lt: #a4aee6;
    --sec-pasar-lt: #d9a6cf;
    --sec-sagu-lt: #dcc09a;
    --sec-keuangan-lt: #8fd1bf;

    --ed-radius: 6px;
    --ed-shadow: 0 1px 2px rgba(18, 52, 59, 0.06), 0 1px 1px rgba(18, 52, 59, 0.04);
}

.sector-penduduk { --sector: var(--sec-penduduk); --sector-lt: var(--sec-penduduk-lt); }
.sector-tani     { --sector: var(--sec-tani);     --sector-lt: var(--sec-tani-lt); }
.sector-bantuan  { --sector: var(--sec-bantuan);  --sector-lt: var(--sec-bantuan-lt); }
.sector-miskin   { --sector: var(--sec-miskin);   --sector-lt: var(--sec-miskin-lt); }
.sector-infra    { --sector: var(--sec-infra);    --sector-lt: var(--sec-infra-lt); }
.sector-nelayan  { --sector: var(--sec-nelayan);  --sector-lt: var(--sec-nelayan-lt); }
.sector-pasar    { --sector: var(--sec-pasar);    --sector-lt: var(--sec-pasar-lt); }
.sector-sagu     { --sector: var(--sec-sagu);     --sector-lt: var(--sec-sagu-lt); }
.sector-keuangan  { --sector: var(--sec-keuangan);  --sector-lt: var(--sec-keuangan-lt); }
.sector-master   { --sector: var(--sec-master);   --sector-lt: #c3c9ce; }

/* ------------------------------------------------------------------------ */
/* Dasar                                                                    */
/* ------------------------------------------------------------------------ */
body,
.tooltip,
.popover,
.swal2-popup,
.select2-container {
    font-family: var(--ed-font);
}

body {
    color: var(--ed-ink);
    -webkit-font-smoothing: antialiased;
}

.content-wrapper {
    background: var(--ed-bg);
}

a { color: var(--ed-primary); }
a:hover { color: var(--ed-primary-dark); }

.text-muted { color: var(--ed-muted) !important; }

.table td, .table th,
.kpi-value,
.table-rekap { font-variant-numeric: tabular-nums; }

:focus-visible {
    outline: 2px solid var(--ed-gold);
    outline-offset: 2px;
}

.btn-primary {
    background-color: var(--ed-primary);
    border-color: var(--ed-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--ed-primary-dark);
    border-color: var(--ed-primary-dark);
}
.btn-outline-primary {
    color: var(--ed-primary);
    border-color: var(--ed-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--ed-primary);
    border-color: var(--ed-primary);
}

.page-item.active .page-link {
    background-color: var(--ed-primary);
    border-color: var(--ed-primary);
}
.page-link { color: var(--ed-primary); }

.form-control:focus,
.custom-select:focus {
    border-color: #6fa3b0;
    box-shadow: 0 0 0 0.2rem rgba(29, 93, 107, 0.15);
}

.form-group > label {
    font-weight: 600;
    color: var(--ed-ink);
}

/* Lencana dengan nuansa lembut agar tabel tidak ramai */
.badge { font-weight: 600; padding: 0.3em 0.55em; border-radius: 4px; }
.badge-success   { background: rgba(79, 125, 44, 0.15);  color: #3a5d1f; }
.badge-info      { background: rgba(43, 111, 138, 0.14); color: #22586e; }
.badge-warning   { background: rgba(201, 138, 27, 0.2);  color: #7a5310; }
.badge-danger    { background: rgba(180, 72, 58, 0.15);  color: #8c3427; }
.badge-secondary { background: rgba(95, 111, 124, 0.15); color: #45515b; }
.badge-primary   { background: rgba(29, 93, 107, 0.14);  color: var(--ed-primary); }
.badge-light     { background: #f1f4f3; color: var(--ed-muted); border: 1px solid var(--ed-line); }

/* ------------------------------------------------------------------------ */
/* Navbar & sidebar                                                         */
/* ------------------------------------------------------------------------ */
.main-header {
    border-bottom: 1px solid var(--ed-line);
}
.navbar-instansi {
    color: var(--ed-muted) !important;
    font-size: 0.875rem;
    cursor: default;
}

.sidebar-edash,
.sidebar-edash .sidebar {
    background: var(--ed-sidebar);
}
.sidebar-edash .brand-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--ed-sidebar-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0.7rem 0.9rem;
    min-height: 57px;
}
.sidebar-edash .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-weight: 700 !important;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-edash .brand-text small {
    font-weight: 500;
    font-size: 0.68rem;
    margin-top: 0.1rem;
    color: rgba(255, 255, 255, 0.62);
    overflow: hidden;
    text-overflow: ellipsis; /* tinggi brand harus tetap satu baris agar menu tidak tertimpa */
}

.brand-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: var(--ed-gold);
    color: var(--ed-sidebar-2);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}
.brand-mark-lg {
    text-decoration: none;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    font-size: 1.2rem;
}

/* Logo aplikasi (lambang daerah) */
.brand-logo {
    flex: 0 0 auto;
    display: block;
    height: 38px;
    width: auto;
}
.brand-logo-lg {
    height: 96px;
}
.brand-logo-link {
    display: inline-block;
    margin-bottom: 1.25rem;
}
.brand-logo-link:hover .brand-logo,
.brand-logo-link:focus .brand-logo {
    transform: translateY(-1px);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

/* Mode sidebar ciut: tanda merek tetap di tengah */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link .brand-text {
    display: none;   /* AdminLTE hanya menyembunyikan (visibility), sehingga logo terdorong ke kiri */
}
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.sidebar-edash .nav-sidebar .nav-header {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    padding: 1rem 1rem 0.35rem;
}
.sidebar-edash .nav-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.78);
    border-radius: 5px;
}
.sidebar-edash .nav-sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.sidebar-edash .nav-sidebar > .nav-item > .nav-link.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--ed-gold);
}
.sidebar-edash .nav-link[data-sector="penduduk"] { --sector-lt: var(--sec-penduduk-lt); }
.sidebar-edash .nav-link[data-sector="tani"]     { --sector-lt: var(--sec-tani-lt); }
.sidebar-edash .nav-link[data-sector="bantuan"]  { --sector-lt: var(--sec-bantuan-lt); }
.sidebar-edash .nav-link[data-sector="miskin"]   { --sector-lt: var(--sec-miskin-lt); }
.sidebar-edash .nav-link[data-sector="infra"]    { --sector-lt: var(--sec-infra-lt); }
.sidebar-edash .nav-link[data-sector="nelayan"]  { --sector-lt: var(--sec-nelayan-lt); }
.sidebar-edash .nav-link[data-sector="pasar"]    { --sector-lt: var(--sec-pasar-lt); }
.sidebar-edash .nav-link[data-sector="sagu"]     { --sector-lt: var(--sec-sagu-lt); }
.sidebar-edash .nav-link[data-sector="keuangan"] { --sector-lt: var(--sec-keuangan-lt); }
.sidebar-edash .nav-link[data-sector] .nav-icon {
    color: var(--sector-lt);
}
.sidebar-edash .nav-sidebar > .nav-item > .nav-link.active[data-sector] {
    box-shadow: inset 3px 0 0 var(--sector-lt);
}

/* ------------------------------------------------------------------------ */
/* Judul halaman                                                            */
/* ------------------------------------------------------------------------ */
.content-header {
    padding: 1.1rem 0.5rem 0.4rem;
}
.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ed-ink);
}
.page-subtitle {
    color: var(--ed-muted);
    font-size: 0.9rem;
    margin-top: 0.15rem;
}
.content-header .breadcrumb {
    background: transparent;
    font-size: 0.82rem;
    margin-bottom: 0;
}

/* ------------------------------------------------------------------------ */
/* Kartu                                                                    */
/* ------------------------------------------------------------------------ */
.card {
    border-radius: var(--ed-radius);
    box-shadow: var(--ed-shadow);
    border: 1px solid var(--ed-line);
}
.card-sector {
    border-top: 3px solid var(--sector, var(--ed-primary));
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--ed-line);
}
.card-title {
    font-size: 0.98rem;
    font-weight: 600;
}
.card-sector > .card-header .card-title > i {
    color: var(--sector);
}
.card-footer {
    background: #f7f9f8;
    border-top: 1px solid var(--ed-line);
}

.filter-bar {
    background: #f7f9f8;
}
.filter-bar label,
.dash-filter label {
    font-weight: 600;
    color: var(--ed-muted);
}

/* Tabel data */
table.dataTable thead th {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--ed-muted);
    border-bottom-width: 1px;
    white-space: nowrap;
}
table.dataTable td {
    vertical-align: middle;
    font-size: 0.9rem;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: 0.85rem;
    color: var(--ed-muted);
}
div.dataTables_wrapper div.dataTables_processing {
    border: 1px solid var(--ed-line);
    box-shadow: var(--ed-shadow);
    padding: 0.6rem 1rem !important;
    margin-top: -1.2rem;
    font-weight: 500;
}
div.dataTables_wrapper div.dataTables_processing > div:last-child { display: none; }
.btn-xs {
    padding: 0.15rem 0.45rem;
    font-size: 0.78rem;
}

/* Select2 disesuaikan ke tinggi custom-select */
.select2-container--bootstrap4 .select2-selection--single {
    height: calc(2.25rem + 2px) !important;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: #6fa3b0;
    box-shadow: 0 0 0 0.2rem rgba(29, 93, 107, 0.15);
}
.is-invalid + .select2-container--bootstrap4 .select2-selection {
    border-color: #dc3545;
}

/* Matriks hak akses peran */
.perm-matrix thead th {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ed-muted);
    border-top: 0;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--ed-surface);
    z-index: 1;
}
.perm-matrix thead .btn-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ed-primary);
}
.perm-matrix td,
.perm-matrix th {
    vertical-align: middle;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}
.perm-matrix tr.perm-group th {
    background: #f4f7f6;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ed-muted);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.perm-matrix .perm-icon {
    width: 1.3em;
    margin-right: 0.45rem;
    text-align: center;
    color: var(--sector, var(--ed-muted));
}
.perm-matrix .perm-check {
    width: 1.05rem;
    height: 1.05rem;
    cursor: pointer;
    accent-color: var(--ed-primary);
    vertical-align: middle;
}
.perm-matrix .perm-check:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}
.perm-matrix .perm-na {
    color: #c3ccc9;
}
.perm-matrix tbody tr:not(.perm-group):hover {
    background: rgba(29, 93, 107, 0.04);
}

/* Impor data */
.import-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: langkah;
    font-size: 0.88rem;
    color: var(--ed-muted);
}
.import-steps li {
    counter-increment: langkah;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.import-steps li::before {
    content: counter(langkah);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #e3e9e7;
    color: var(--ed-muted);
    font-weight: 700;
    font-size: 0.78rem;
}
.import-steps li.aktif {
    color: var(--ed-ink);
    font-weight: 600;
}
.import-steps li.aktif::before {
    background: var(--sec-penduduk);
    color: #fff;
}
.import-steps li.selesai::before {
    content: '\2713';
    background: var(--sec-tani);
    color: #fff;
}
.import-drop {
    border: 2px dashed #c7d2cf;
    border-radius: var(--ed-radius);
    padding: 1.6rem 1rem;
    text-align: center;
    background: #fafcfb;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.import-drop.dragover {
    border-color: var(--sec-penduduk);
    background: rgba(43, 111, 138, 0.06);
}
.import-drop i {
    font-size: 1.8rem;
    color: var(--sec-penduduk);
    opacity: 0.8;
}
.import-stat {
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    padding: 0.75rem 0.9rem;
    height: 100%;
}
.import-stat .angka {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.import-stat .ket {
    font-size: 0.8rem;
    color: var(--ed-muted);
}
.import-stat.ok      { border-top: 3px solid var(--sec-tani); }
.import-stat.update  { border-top: 3px solid var(--sec-penduduk); }
.import-stat.skip    { border-top: 3px solid #9aa5ae; }
.import-stat.error   { border-top: 3px solid var(--sec-miskin); }
.import-errors td {
    font-size: 0.85rem;
    vertical-align: top;
}
.ref-values dt {
    font-size: 0.82rem;
    font-weight: 600;
}
.ref-values dd {
    font-size: 0.82rem;
    color: var(--ed-muted);
    margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------------ */
/* Dashboard                                                                */
/* ------------------------------------------------------------------------ */
.dash-filter {
    border-top: 0;
}

.kpi-row > [class*="col"] {
    margin-bottom: 1rem;
    display: flex;
}
.kpi {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.95rem 1.05rem 1rem;
    background: var(--ed-surface);
    border: 1px solid var(--ed-line);
    border-top: 3px solid var(--sector);
    border-radius: var(--ed-radius);
    box-shadow: var(--ed-shadow);
    color: var(--ed-ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kpi:hover {
    color: var(--ed-ink);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(18, 52, 59, 0.1);
}
.kpi-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ed-muted);
}
.kpi-label i {
    color: var(--sector);
    width: 1.1em;
    text-align: center;
}
.kpi-value {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.35rem 0 0.25rem;
    letter-spacing: -0.02em;
}
.kpi-meta {
    font-size: 0.8rem;
    color: var(--ed-muted);
    line-height: 1.4;
}

.dash-section {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1.4rem 0 0.75rem;
}
.dash-section .swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--sector);
    flex: 0 0 auto;
}
.dash-section h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--ed-ink);
}
.dash-section::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ed-line);
    margin-left: 0.4rem;
}

.chart-box {
    position: relative;
    height: 280px;
}
.chart-box-tall {
    height: 360px;
}
.chart-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--ed-muted);
    font-size: 0.9rem;
    background: repeating-linear-gradient(-45deg, #f7f9f8, #f7f9f8 8px, #f1f4f3 8px, #f1f4f3 16px);
    border-radius: 4px;
    text-align: center;
    padding: 1rem;
}
.chart-empty i {
    font-size: 1.4rem;
    opacity: 0.6;
}

.map-infra {
    height: 420px;
    border-radius: 0 0 var(--ed-radius) var(--ed-radius);
}
.map-picker {
    height: 300px;
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    cursor: crosshair;
}
.map-picker + p,
.map-picker-help {
    font-size: 0.82rem;
}
.leaflet-container {
    font-family: var(--ed-font);
    z-index: 0;
}
.map-legend {
    background: rgba(255, 255, 255, 0.95);
    padding: 0.5rem 0.7rem;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--ed-ink);
}
.map-legend strong {
    display: block;
    margin-bottom: 0.15rem;
}
.map-legend span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.map-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.map-popup {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 170px;
    font-size: 0.82rem;
}
.map-popup strong {
    font-size: 0.9rem;
}
.map-popup-kondisi {
    align-self: flex-start;
    padding: 0.05rem 0.45rem;
    border-radius: 3px;
    background: var(--k);
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
}

.table-rekap thead th {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ed-muted);
    border-top: 0;
    vertical-align: bottom;
    white-space: nowrap;
}
.table-rekap td,
.table-rekap th {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}
.table-rekap tfoot th {
    border-top: 2px solid var(--ed-line);
    background: #f7f9f8;
}
.databar {
    background-image: linear-gradient(90deg, rgba(180, 72, 58, 0.18) var(--w, 0%), transparent var(--w, 0%));
    background-repeat: no-repeat;
    background-size: 100% 60%;
    background-position: 0 50%;
}

/* ------------------------------------------------------------------------ */
/* Halaman login                                                            */
/* ------------------------------------------------------------------------ */
.login-split {
    margin: 0;
    background: var(--ed-bg);
    font-family: var(--ed-font);
}
.login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: 100vh;
}
.login-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem clamp(2rem, 6vw, 5rem);
    background:
        radial-gradient(circle at 85% 15%, rgba(201, 162, 39, 0.14), transparent 45%),
        linear-gradient(160deg, var(--ed-sidebar) 0%, var(--ed-sidebar-2) 100%);
    color: #fff;
    overflow: hidden;
}
.login-intro h1 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 1.4rem 0 0.8rem;
}
.login-intro > p {
    color: rgba(255, 255, 255, 0.72);
    max-width: 30rem;
    font-size: 1.02rem;
}
.sector-legend {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
    display: grid;
    gap: 0.55rem;
}
.sector-legend li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
}
.sector-legend .swatch {
    width: 26px;
    height: 6px;
    border-radius: 3px;
    background: var(--sector-lt);
}
.login-instansi {
    margin-top: 2.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5) !important;
}
.login-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: var(--ed-surface);
}
.login-form form {
    width: 100%;
    max-width: 380px;
}
.login-form h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.login-form .btn-primary {
    margin-top: 1.2rem;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .login-shell {
        grid-template-columns: 1fr;
    }
    .login-intro {
        padding: 2rem 1.5rem;
    }
    .login-intro h1 {
        margin-top: 1rem;
    }
    .sector-legend,
    .login-instansi {
        display: none;
    }
}

/* ------------------------------------------------------------------------ */
/* Responsif, aksesibilitas, cetak                                          */
/* ------------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .page-title { font-size: 1.25rem; }
    .kpi-value  { font-size: 1.55rem; }
    .map-infra  { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .kpi:hover { transform: none; }
}

@media print {
    .main-sidebar,
    .main-header,
    .main-footer,
    .no-print,
    .content-header .breadcrumb,
    .leaflet-control-container {
        display: none !important;
    }
    body,
    .content-wrapper {
        background: #fff !important;
    }
    .content-wrapper,
    .main-footer {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }
    .card,
    .kpi {
        box-shadow: none !important;
        break-inside: avoid;
    }
    .kpi-row > [class*="col"] {
        flex: 1 0 0;
        max-width: none;
    }
    .dash-section {
        break-after: avoid;
    }
    a[href]::after {
        content: none !important;
    }
    .databar {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Tombol bantu matriks hak akses */
.perm-matrix .js-perm-row {
    color: var(--ed-primary);
}
.perm-matrix .js-perm-row:hover {
    color: var(--ed-primary-dark);
}

a.brand-mark:hover {
    color: var(--ed-sidebar-2);
    text-decoration: none;
}

/* Cakupan perlindungan nelayan (dashboard) */
.cakupan + .cakupan {
    margin-top: 1.1rem;
}
.cakupan-kepala {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9rem;
}
.cakupan-kepala strong {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}
.cakupan-batang {
    height: 8px;
    margin: 0.35rem 0 0.3rem;
    background: #e7eaf4;
    border-radius: 4px;
    overflow: hidden;
}
.cakupan-batang i {
    display: block;
    height: 100%;
    background: var(--sec-nelayan);
    border-radius: 4px;
}
.cakupan-ket {
    font-size: 0.78rem;
    color: var(--ed-muted);
}

/* Batang keterisian pasar memakai warna sektor pasar */
.databar-pasar {
    background-image: linear-gradient(90deg, rgba(138, 74, 126, 0.2) var(--w, 0%), transparent var(--w, 0%));
}

/* Tujuh kartu dalam satu baris: sediakan dua baris untuk label agar angka tetap sejajar */
@media (min-width: 1200px) {
    .kpi-row .kpi-label {
        min-height: 2.6em;
        align-items: flex-start;
    }
    .kpi-row .kpi-label i {
        margin-top: 0.2em;
    }
}

/* Peta sebaran lahan sagu */
.map-sagu {
    height: 540px;
    border-radius: 0 0 var(--ed-radius) var(--ed-radius);
}
.sagu-angka {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sagu-angka li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--ed-line);
}
.sagu-angka li:last-child {
    border-bottom: 0;
}
.sagu-angka span {
    color: var(--ed-muted);
    font-size: 0.88rem;
}
.sagu-angka strong {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

/* Harga pangan: tanda naik/turun, garis kecil, dan tabel input */
.ubah { font-weight: 600; font-variant-numeric: tabular-nums; }
.ubah-naik { color: #b4483a; }
.ubah-turun { color: #3a5d1f; }
.ubah-tetap, .ubah-kosong { color: var(--ed-muted); font-weight: 500; }
.spark-sel { color: var(--sec-pasar); }
.sparkline { display: inline-block; vertical-align: middle; }
.tabel-harga td, .tabel-harga th { vertical-align: middle; }
.baris-kategori th {
    background: #f4f7f6;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ed-muted);
}
.tabel-input-harga td { vertical-align: middle; }
.tabel-input-harga .perlu-cek {
    border-color: #d6a228;
    box-shadow: 0 0 0 0.15rem rgba(214, 162, 40, 0.25);
}

/* Teks khusus pembaca layar (.sr-only, position absolute) di dalam tabel bergulir harus ikut
   terpotong oleh wadahnya; tanpa ini halaman ponsel bisa melebar ke samping. */
.table-responsive {
    position: relative;
}

/* Peta Leaflet: warna laut bila tile belum/tidak termuat, dan mode cadangan batas kecamatan */
.peta-leaflet.leaflet-container {
    background: #d9e6e9;
}
.peta-cadangan .leaflet-tile-pane {
    display: none;
}
.map-peringatan {
    max-width: 16rem;
    background: #fff8e1;
    border: 1px solid #ecd9a0;
    color: #6b5212;
}
.leaflet-tooltip.label-kecamatan {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: #3c4a55;
    font-size: 0.7rem;
    font-weight: 600;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff;
    white-space: nowrap;
}
.leaflet-tooltip.label-kecamatan::before {
    display: none;
}


/* Keuangan daerah (APBD) */
.apbd-ringkas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.apbd-kotak {
    padding: 1rem 1.1rem;
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    background: var(--ed-surface);
}
.apbd-kotak .judul {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ed-muted);
}
.apbd-kotak .nilai {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.apbd-kotak .ket {
    font-size: 0.82rem;
    color: var(--ed-muted);
}
.apbd-progres {
    height: 8px;
    margin: 0.5rem 0 0.35rem;
    background: #e8eeec;
    border-radius: 4px;
    overflow: hidden;
}
.apbd-progres i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--sec-keuangan);
}
.apbd-progres.belanja i {
    background: #2b6f8a;
}
.databar-keuangan {
    background-image: linear-gradient(90deg, rgba(30, 107, 92, 0.18) var(--w, 0%), transparent var(--w, 0%));
}
.apbd-input .lebih-pagu {
    border-color: #b4483a;
    box-shadow: 0 0 0 0.15rem rgba(180, 72, 58, 0.18);
}
@media (max-width: 767.98px) {
    .apbd-ringkas {
        grid-template-columns: 1fr;
    }
}

/* Keuangan daerah (APBD) di dashboard */
.apbd-kartu .card-body {
    padding: 1rem 1.15rem;
}
.apbd-kartu-judul {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--ed-muted);
    font-size: 0.9rem;
}
.apbd-kartu-judul i {
    color: var(--sector);
}
.apbd-kartu-angka {
    margin: 0.35rem 0 0.6rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.apbd-kartu-angka small {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ed-muted);
    letter-spacing: 0;
}
.apbd-progres {
    position: relative;
    height: 10px;
    border-radius: 5px;
    background: #e3e9e7;
    overflow: visible;
}
.apbd-progres span {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--sector);
}
.apbd-ideal {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 18px;
    background: var(--ed-ink);
    opacity: 0.55;
}
.apbd-kartu-kaki {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--ed-muted);
}
.apbd-kartu-kaki strong {
    color: var(--ed-ink);
}
.apbd-rincian {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.88rem;
}
.apbd-rincian li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    border-top: 1px solid var(--ed-line);
}
.apbd-rincian span {
    color: var(--ed-muted);
}
.databar-apbd {
    background-image: linear-gradient(90deg, rgba(30, 107, 92, 0.2) var(--w, 0%), transparent var(--w, 0%));
}

/* Belanja memakai warna jingga seperti di grafik, pendapatan warna sektor keuangan */
.apbd-kartu.apbd-belanja .apbd-progres span { background: #c98a1b; }
.apbd-kartu.apbd-belanja .apbd-kartu-judul i { color: #c98a1b; }

/* Batang persentase realisasi per jenis rekening: hijau untuk pendapatan, jingga untuk belanja */
.databar-apbd-pd {
    background-image: linear-gradient(90deg, rgba(30, 107, 92, 0.2) var(--w, 0%), transparent var(--w, 0%));
}
.databar-apbd-bl {
    background-image: linear-gradient(90deg, rgba(201, 138, 27, 0.22) var(--w, 0%), transparent var(--w, 0%));
}

/* Kode rekening ditulis dengan huruf monospace berwarna netral */
.table-rekap code,
.table code {
    color: var(--ed-ink);
    font-size: 0.85em;
}

/* Belanja per sub kegiatan (susunan DPA) */
.tabel-dpa td,
.tabel-dpa th {
    vertical-align: top;
}
.tabel-dpa tr.lv-prog td {
    background: #e6eeec;
    font-weight: 700;
}
.tabel-dpa tr.lv-keg td {
    background: #f3f6f5;
    font-weight: 600;
}
.tabel-dpa tr.lv-keg td:nth-child(2) { padding-left: 1rem; }
.tabel-dpa tr.lv-sub td { font-weight: 600; }
.tabel-dpa tr.lv-sub td:nth-child(2) { padding-left: 2rem; }
.tabel-dpa tr.lv-rek td:nth-child(2) { padding-left: 3rem; }
.tabel-dpa tr.lv-item td {
    color: var(--ed-muted);
    font-size: 0.85rem;
    border-top-style: dotted;
}
.tabel-dpa tr.lv-item td:nth-child(2) { padding-left: 4rem; }
.tabel-dpa .catatan-selisih { color: #8a6412; }
.tabel-dpa tfoot th { border-top: 2px solid var(--ed-ink); }
@media print {
    .tabel-dpa { font-size: 10pt; }
    .tabel-dpa tr { page-break-inside: avoid; }
}

/* Input IPKD */
.tabel-ipkd tr.baris-dimensi td {
    background: #e6eeec;
    border-top: 2px solid var(--ed-line);
}
.tabel-ipkd td { vertical-align: middle; }
.ipkd-total strong { font-size: 1.25rem; margin-left: 0.35rem; }
.angka-bantu li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ed-line);
    font-size: 0.9rem;
}
.angka-bantu li:last-child { border-bottom: 0; }

.ipkd-angka {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sec-keuangan);
    line-height: 1.1;
}
.ipkd-angka small { font-size: 1rem; color: var(--ed-muted); font-weight: 600; }
@media (min-width: 992px) {
    .angka-bantu-kolom { columns: 2; column-gap: 2.5rem; }
    .angka-bantu-kolom li { break-inside: avoid; }
}