/*!
 * ekin.css — tampilan bersama eKin Internal Pringsewu.
 *
 * Struktur meniru e-Kinerja BKN (sidebar kiri putih berlogo, bilah atas
 * "Hai, NAMA", kartu isi, tabel SKP bergaris) dengan warna merek Pemkab
 * (hijau AKSARA #00743e, lime #6eab11).
 *
 * KOMPONEN UNTUK MODUL (pakai, jangan menulis ulang):
 *   .kartu / .kartu-kepala / .kartu-judul / .kartu-isi / .kartu-kaki
 *   .tabel-skp (tabel bergaris format SKP BKN) + .baris-bagian, .kolom-no,
 *        .kolom-angka, .kolom-aksi, .sel-label; varian .tabel-identitas
 *   .badge-status.status-{draf|diajukan|disetujui|ditolak|dikembalikan|dinilai|berjalan|selesai}
 *        → helper badge_status()
 *   .badge-predikat.predikat-{sangat_baik|baik|butuh_perbaikan|kurang|sangat_kurang}
 *   .chip + .chip-{hijau|lime|kuning|oranye|merah|biru|abu} (+ .chip-garis)
 *   .stat (angka ringkas), .kosong (keadaan kosong), .petunjuk (kotak kanan)
 *   .bilah-alat (baris filter/aksi di atas tabel), .teks-kecil, .teks-redup
 *   .cetak-* untuk layout/cetak (HTML ramah-cetak, K14)
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/inter-latin.woff2") format("woff2");
}

:root {
  --ekin-hijau: #00743e;
  --ekin-hijau-tua: #005c31;
  --ekin-hijau-muda: #e6f2ec;
  --ekin-hijau-pucat: #f3f9f5;
  --ekin-lime: #6eab11;
  --ekin-latar: #f3f6f4;
  --ekin-teks: #1d2b23;
  --ekin-redup: #64736b;
  --ekin-garis: #e1e7e3;
  --ekin-garis-tabel: #cfd9d3;
  --ekin-sidebar: 264px;
  --ekin-radius: 12px;

  --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: var(--ekin-teks);
  /* --bs-body-bg SENGAJA tidak diubah: input, modal, dropdown, dan tabel
     Bootstrap memakai warnanya sebagai latar — harus tetap putih. */
  --bs-success: #00743e;
  --bs-success-rgb: 0, 116, 62;
  --bs-primary: #00743e;
  --bs-primary-rgb: 0, 116, 62;
  --bs-link-color: #00743e;
  --bs-link-color-rgb: 0, 116, 62;
  --bs-link-hover-color: #005c31;
  --bs-link-hover-color-rgb: 0, 92, 49;
  --bs-border-color: var(--ekin-garis);
  --bs-success-bg-subtle: #e3f4ea;
  --bs-success-text-emphasis: #0b5a33;
  --bs-focus-ring-color: rgba(0, 116, 62, .25);
}

body {
  font-family: var(--bs-font-sans-serif);
  background: var(--ekin-latar);
  color: var(--ekin-teks);
  font-size: .9375rem;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ */
/* Tombol & formulir bernuansa hijau                                   */
/* ------------------------------------------------------------------ */
.btn-success, .btn-primary {
  --bs-btn-bg: var(--ekin-hijau);
  --bs-btn-border-color: var(--ekin-hijau);
  --bs-btn-hover-bg: var(--ekin-hijau-tua);
  --bs-btn-hover-border-color: var(--ekin-hijau-tua);
  --bs-btn-active-bg: #004d29;
  --bs-btn-active-border-color: #004d29;
  --bs-btn-disabled-bg: #6f9e86;
  --bs-btn-disabled-border-color: #6f9e86;
  --bs-btn-focus-shadow-rgb: 0, 116, 62;
}
.btn-outline-success, .btn-outline-primary {
  --bs-btn-color: var(--ekin-hijau);
  --bs-btn-border-color: var(--ekin-hijau);
  --bs-btn-hover-bg: var(--ekin-hijau);
  --bs-btn-hover-border-color: var(--ekin-hijau);
  --bs-btn-active-bg: var(--ekin-hijau-tua);
  --bs-btn-active-border-color: var(--ekin-hijau-tua);
  --bs-btn-focus-shadow-rgb: 0, 116, 62;
}
.btn-lime {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ekin-lime);
  --bs-btn-border-color: var(--ekin-lime);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c920c;
  --bs-btn-hover-border-color: #5c920c;
}
.btn { font-weight: 500; }
.btn-sm { border-radius: 8px; }
.form-control, .form-select { border-color: #cfd8d3; }
.form-control:focus, .form-select:focus {
  border-color: #58a67f;
  box-shadow: 0 0 0 .2rem rgba(0, 116, 62, .15);
}
.form-label { font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }
.form-text { color: var(--ekin-redup); }
.form-check-input:checked { background-color: var(--ekin-hijau); border-color: var(--ekin-hijau); }
.progress { background: #e5ebe7; }
.progress-bar { background-color: var(--ekin-hijau); }
.text-success { color: var(--ekin-hijau) !important; }
.bg-success { background-color: var(--ekin-hijau) !important; }
a { text-underline-offset: 2px; }
.teks-redup { color: var(--ekin-redup) !important; }
code { color: var(--ekin-hijau-tua); }
.teks-kecil { font-size: .8125rem; }
.fw-semi { font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Kerangka: sidebar + kolom utama                                     */
/* ------------------------------------------------------------------ */
.ekin-shell { display: flex; min-height: 100vh; }
.ekin-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ekin-konten { padding: 1.5rem 1.75rem 2.5rem; flex: 1 0 auto; }

.ekin-sidebar {
  --bs-offcanvas-width: var(--ekin-sidebar);
  background: #fff;
  border-right: 1px solid var(--ekin-garis);
}
@media (min-width: 992px) {
  .ekin-sidebar {
    width: var(--ekin-sidebar);
    flex: 0 0 var(--ekin-sidebar);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
}
.ekin-sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 0; height: 100%; }

.ekin-merek {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.25rem 1rem;
  border-bottom: 1px solid var(--ekin-garis);
}
.ekin-merek a { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.ekin-merek img { width: 38px; height: auto; flex-shrink: 0; }
.ekin-merek .nama { white-space: nowrap; font-weight: 800; font-size: 1.2rem; color: var(--ekin-hijau); line-height: 1.05; letter-spacing: -.01em; }
.ekin-merek .nama span { color: var(--ekin-lime); }
.ekin-merek .sub { font-size: .72rem; color: var(--ekin-redup); letter-spacing: .02em; }

.ekin-nav { padding: .75rem .75rem 1rem; flex: 1 1 auto; }
.ekin-nav .grup {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #95a39b; padding: 1rem .75rem .35rem;
}
.ekin-nav a {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem; margin-bottom: 2px;
  border-radius: 10px; color: #3a4a41; text-decoration: none;
  font-weight: 500; font-size: .9rem; position: relative;
}
.ekin-nav a i { width: 20px; text-align: center; color: #7b8b82; font-size: 1rem; }
.ekin-nav a:hover { background: var(--ekin-hijau-pucat); color: var(--ekin-hijau-tua); }
.ekin-nav a:hover i { color: var(--ekin-hijau); }
.ekin-nav a.aktif { background: var(--ekin-hijau-muda); color: var(--ekin-hijau); font-weight: 600; }
.ekin-nav a.aktif i { color: var(--ekin-hijau); }
.ekin-nav a.aktif::before {
  content: ""; position: absolute; left: -.75rem; top: 8px; bottom: 8px;
  width: 4px; border-radius: 0 4px 4px 0; background: var(--ekin-hijau);
}
.ekin-nav .lencana {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: #e8590c; color: #fff;
  font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.ekin-sidebar-kaki {
  margin: 0 1rem 1rem; padding: .85rem 1rem; border-radius: 10px;
  background: var(--ekin-hijau-pucat); border: 1px solid #d8eadf;
  font-size: .75rem; color: #4d5f55; line-height: 1.45;
}
.ekin-sidebar-kaki strong { color: var(--ekin-hijau-tua); }

/* Bilah atas */
.ekin-topbar {
  position: sticky; top: 0; z-index: 1020;
  height: 64px; background: #fff; border-bottom: 1px solid var(--ekin-garis);
  display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem;
}
.ekin-topbar .tombol-menu { border: 0; background: transparent; font-size: 1.25rem; color: #3a4a41; padding: .25rem .5rem; }
.ekin-topbar .merek-ponsel { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--ekin-hijau); text-decoration: none; }
.ekin-topbar .merek-ponsel img { width: 26px; }
.ekin-topbar .konteks { color: var(--ekin-redup); font-size: .85rem; }
.ekin-pengguna {
  margin-left: auto; display: flex; align-items: center; gap: .75rem;
  background: transparent; border: 0; padding: .25rem .25rem .25rem .5rem; border-radius: 12px; text-align: right;
}
.ekin-pengguna:hover { background: var(--ekin-hijau-pucat); }
.ekin-pengguna .teks-pengguna { display: block; min-width: 0; }
.ekin-pengguna .hai { font-weight: 700; font-size: .9rem; color: var(--ekin-teks); line-height: 1.2; }
.ekin-pengguna .jabatan { font-size: .75rem; color: var(--ekin-redup); max-width: 340px; }
@media (max-width: 767.98px) { .ekin-pengguna .jabatan { max-width: 220px; } }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--ekin-hijau), var(--ekin-lime));
  color: #fff; font-weight: 700; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center; letter-spacing: .02em;
}
.avatar-sm { width: 32px; height: 32px; font-size: .72rem; }

/* Kepala halaman */
.kepala-halaman { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.kepala-halaman h1 { font-size: 1.5rem; font-weight: 700; margin: 0; letter-spacing: -.015em; }
.kepala-halaman .subjudul { color: var(--ekin-redup); margin: .25rem 0 0; font-size: .9rem; }
.kepala-halaman .aksi { display: flex; flex-wrap: wrap; gap: .5rem; }

.ekin-kaki { padding: 1rem 1.75rem; color: #8a988f; font-size: .75rem; border-top: 1px solid var(--ekin-garis); background: #fff; }

/* ------------------------------------------------------------------ */
/* Kartu                                                               */
/* ------------------------------------------------------------------ */
.kartu {
  background: #fff; border: 1px solid var(--ekin-garis); border-radius: var(--ekin-radius);
  box-shadow: 0 1px 2px rgba(16, 32, 24, .04);
}
.kartu + .kartu { margin-top: 1rem; }
.kartu-kepala {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .9rem 1.15rem; border-bottom: 1px solid var(--ekin-garis);
}
.kartu-judul { font-weight: 700; font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .55rem; }
.kartu-judul i { color: var(--ekin-hijau); }
.kartu-isi { padding: 1.15rem; }
.kartu-kaki { padding: .75rem 1.15rem; border-top: 1px solid var(--ekin-garis); background: #fafcfb; border-radius: 0 0 var(--ekin-radius) var(--ekin-radius); }
.kartu-hijau { background: linear-gradient(135deg, #00743e 0%, #0b8a4d 60%, #6eab11 140%); color: #fff; border: 0; }
.kartu-hijau .teks-redup { color: rgba(255, 255, 255, .8) !important; }

.ikon-bulat {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ekin-hijau-muda); color: var(--ekin-hijau); font-size: 1.1rem;
}
.ikon-bulat.kuning { background: #fff4d6; color: #a36b00; }
.ikon-bulat.biru { background: #e6effb; color: #1d5fa8; }
.ikon-bulat.oranye { background: #ffeddc; color: #c2570c; }
.ikon-bulat.ungu { background: #efe9fb; color: #6941c6; }

.stat { display: flex; flex-direction: column; }
.stat .angka { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.stat .label { font-size: .78rem; color: var(--ekin-redup); }

/* ------------------------------------------------------------------ */
/* Tabel format SKP BKN                                                */
/* ------------------------------------------------------------------ */
.tabel-skp { width: 100%; border-collapse: collapse; font-size: .875rem; background: #fff; }
.tabel-skp th, .tabel-skp td { border: 1px solid var(--ekin-garis-tabel); padding: .55rem .65rem; vertical-align: top; }
.tabel-skp thead th {
  background: #eaf2ed; color: #1f3329; font-weight: 700; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .03em; text-align: center; vertical-align: middle;
}
.tabel-skp .baris-bagian td, .tabel-skp tr.baris-bagian > th {
  background: #f4f8f5; font-weight: 700; color: #20352a; text-transform: uppercase; font-size: .78rem; letter-spacing: .03em;
}
.tabel-skp .kolom-no { width: 44px; text-align: center; }
.tabel-skp .kolom-angka { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabel-skp .kolom-tengah { text-align: center; }
.tabel-skp .kolom-aksi { width: 1%; white-space: nowrap; text-align: center; }
.tabel-skp .sel-label { width: 34%; color: #4a5a51; background: #fafcfb; font-weight: 500; }
.tabel-skp tbody tr:hover td { background: #fbfdfc; }
.tabel-skp .teks-kosong { color: #98a59e; font-style: italic; }
.tabel-identitas th { width: 50%; }
.tabel-identitas td.sel-label { width: 34%; }

/* Tabel biasa yang rapi */
.tabel-ekin { --bs-table-bg: #fff; margin: 0; font-size: .875rem; }
.tabel-ekin thead th {
  background: #f5f8f6; color: #4a5a51; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700; border-bottom-width: 1px; white-space: nowrap;
}
.tabel-ekin td, .tabel-ekin th { padding: .7rem .85rem; vertical-align: middle; border-color: #edf1ee; }

/* ------------------------------------------------------------------ */
/* Lencana status, predikat, chip                                      */
/* ------------------------------------------------------------------ */
.badge-status {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .2rem .6rem; border-radius: 999px; border: 1px solid transparent;
  font-size: .74rem; font-weight: 600; line-height: 1.35;
}
.badge-status i { font-size: .7rem; }
.status-draf        { background: #f1f3f2; color: #56625b; border-color: #dce1de; }
.status-diajukan    { background: #fff6d9; color: #8a5d00; border-color: #f3d98b; }
.status-disetujui   { background: #e2f4e9; color: #0b6b3a; border-color: #b4dfc4; }
.status-ditolak     { background: #fde8e7; color: #b42318; border-color: #f5c0bb; }
.status-dikembalikan{ background: #ffefdf; color: #b54708; border-color: #f7cd9c; }
.status-dinilai     { background: #ddf3ef; color: #0a6b5e; border-color: #a6dbd2; }
.status-berjalan    { background: #e6effb; color: #1d5fa8; border-color: #bad3f1; }
.status-selesai     { background: #e2f4e9; color: #0b6b3a; border-color: #b4dfc4; }
.status-kosong      { background: #f7f8f7; color: #7d8a83; border-color: #e3e7e4; }

.badge-predikat { display: inline-block; padding: .2rem .65rem; border-radius: 6px; font-size: .78rem; font-weight: 700; }
.predikat-sangat_baik     { background: #00743e; color: #fff; }
.predikat-baik            { background: #d9f0e2; color: #0b5a33; }
.predikat-butuh_perbaikan { background: #fff1c7; color: #7a5200; }
.predikat-kurang          { background: #ffe0cc; color: #9a3d06; }
.predikat-sangat_kurang   { background: #fbd5d2; color: #9b1c12; }

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 500;
  background: #eef3f0; color: #33443b; border: 1px solid transparent; line-height: 1.4; white-space: nowrap;
}
.chip i { font-size: .72rem; }
.chip-hijau  { background: var(--ekin-hijau-muda); color: #0b5a33; }
.chip-lime   { background: #eef6dd; color: #4a7408; }
.chip-kuning { background: #fff6d9; color: #8a5d00; }
.chip-oranye { background: #ffefdf; color: #b54708; }
.chip-merah  { background: #fde8e7; color: #b42318; }
.chip-biru   { background: #e6effb; color: #1d5fa8; }
.chip-abu    { background: #f1f3f2; color: #56625b; }
.chip-garis  { background: #fff; border-color: #d4ddd8; }

/* ------------------------------------------------------------------ */
/* Kotak petunjuk, keadaan kosong, bilah alat                          */
/* ------------------------------------------------------------------ */
.petunjuk {
  background: #fff; border: 1px solid var(--ekin-garis); border-radius: var(--ekin-radius);
  border-top: 4px solid var(--ekin-lime); padding: 1rem 1.1rem; font-size: .85rem; color: #3f5047;
}
.petunjuk h2, .petunjuk .judul { font-size: .95rem; font-weight: 700; color: var(--ekin-teks); margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; }
.petunjuk h2 i, .petunjuk .judul i { color: var(--ekin-lime); }
.petunjuk ol, .petunjuk ul { padding-left: 1.1rem; margin-bottom: .5rem; }
.petunjuk li { margin-bottom: .35rem; }
.petunjuk p:last-child, .petunjuk ul:last-child, .petunjuk ol:last-child { margin-bottom: 0; }
@media (min-width: 1200px) { .kolom-petunjuk { position: sticky; top: 84px; align-self: flex-start; } }

.kosong { text-align: center; padding: 2.25rem 1rem; color: var(--ekin-redup); }
.kosong .ikon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto .9rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--ekin-hijau-muda); color: var(--ekin-hijau); font-size: 1.5rem;
}
.kosong .judul { font-weight: 700; color: var(--ekin-teks); font-size: 1rem; margin-bottom: .25rem; }

.bilah-alat { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1rem; }
.bilah-alat .pemisah { flex: 1 1 auto; }

/* Pesan kilat */
.alert { border-radius: 10px; font-size: .9rem; }
.alert i.ikon-pesan { margin-right: .5rem; }

/* Select2 serasi dengan Bootstrap */
.select2-container--bootstrap-5 .select2-selection { border-color: #cfd8d3; }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: #58a67f; box-shadow: 0 0 0 .2rem rgba(0, 116, 62, .15); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { background-color: var(--ekin-hijau-muda); color: var(--ekin-hijau-tua); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected { background-color: var(--ekin-hijau); color: #fff; }
.opsi-pegawai .nama { font-weight: 600; }
.opsi-pegawai .ket { font-size: .75rem; opacity: .8; }

/* ------------------------------------------------------------------ */
/* Beranda                                                             */
/* ------------------------------------------------------------------ */
.sambutan { padding: 1.35rem 1.5rem; }
.sambutan .salam { font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.batang-hari { display: flex; align-items: flex-end; gap: .5rem; height: 96px; margin-top: .75rem; }
.batang-hari .hari { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .7rem; color: var(--ekin-redup); }
.batang-hari .tiang { width: 100%; max-width: 40px; height: 64px; background: #eef2ef; border-radius: 6px; position: relative; overflow: hidden; }
.batang-hari .isi { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ekin-lime); border-radius: 6px; }
.batang-hari .isi.penuh { background: var(--ekin-hijau); }
.batang-hari .hari.ini .label-hari { color: var(--ekin-hijau); font-weight: 700; }
.garis-target { position: absolute; left: 0; right: 0; border-top: 1px dashed #9fb3a8; }

.daftar-ringkas { list-style: none; margin: 0; padding: 0; }
.daftar-ringkas li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed #e6ebe8; font-size: .875rem; }
.daftar-ringkas li:last-child { border-bottom: 0; }
.daftar-ringkas .nilai { font-weight: 600; text-align: right; }

.data-diri dt { font-size: .75rem; color: var(--ekin-redup); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.data-diri dd { font-weight: 600; margin-bottom: .85rem; }

.orang { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.orang .nama { font-weight: 600; line-height: 1.25; }
.orang .ket { font-size: .75rem; color: var(--ekin-redup); }

/* ------------------------------------------------------------------ */
/* Halaman masuk                                                       */
/* ------------------------------------------------------------------ */
.halaman-masuk { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; }
.masuk-merek {
  position: relative; overflow: hidden; color: #fff; padding: 3rem 3.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(120% 90% at 0% 0%, #0b8a4d 0%, #00743e 45%, #005229 100%);
}
.masuk-merek::after {
  content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 171, 17, .55) 0%, rgba(110, 171, 17, 0) 70%);
}
.masuk-merek .logo { display: flex; align-items: center; gap: .9rem; }
.masuk-merek .logo img { width: 54px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.masuk-merek .logo .nama { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.masuk-merek .logo .nama span { color: #c8ef7d; }
.masuk-merek .logo .sub { font-size: .8rem; opacity: .85; }
.masuk-merek > div, .masuk-merek h1 { position: relative; z-index: 1; }
.masuk-merek h1 { font-size: 2.15rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; max-width: 520px; }
.masuk-merek .fitur { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; max-width: 480px; position: relative; z-index: 1; }
.masuk-merek .fitur li { display: flex; gap: .75rem; align-items: flex-start; font-size: .92rem; opacity: .95; }
.masuk-merek .fitur i { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .14); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.masuk-merek .catatan { font-size: .75rem; opacity: .75; position: relative; z-index: 1; }
.masuk-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: var(--ekin-latar); }
.masuk-form .kotak { width: 100%; max-width: 420px; }
.masuk-form .kartu-isi { padding: 2rem; }
.masuk-form h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.015em; }
.masuk-form .form-control { padding: .7rem .9rem; border-radius: 10px; }
.masuk-form .input-group .btn { border-radius: 0 10px 10px 0; border-color: #cfd8d3; color: var(--ekin-redup); }
.masuk-form .input-group .form-control { border-radius: 10px 0 0 10px; }
.masuk-form .btn-masuk { padding: .75rem; border-radius: 10px; font-weight: 700; }
.akun-demo { margin-top: 1rem; font-size: .8rem; }
.akun-demo button { border: 1px dashed #b9cabf; background: #fff; border-radius: 8px; padding: .35rem .6rem; text-align: left; width: 100%; }
.akun-demo button:hover { border-color: var(--ekin-hijau); background: var(--ekin-hijau-pucat); }
.akun-demo code { color: var(--ekin-hijau-tua); font-size: .8rem; }
@media (max-width: 991.98px) {
  .halaman-masuk { grid-template-columns: 1fr; }
  .masuk-merek { padding: 1.5rem 1.25rem 1.75rem; }
  .masuk-merek h1 { font-size: 1.35rem; margin-top: 1rem; }
  .masuk-merek .fitur, .masuk-merek .catatan { display: none; }
  .masuk-form { padding: 1.5rem 1rem 2.5rem; align-items: flex-start; }
  .masuk-form .kartu-isi { padding: 1.35rem; }
}

/* ------------------------------------------------------------------ */
/* Ponsel                                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .ekin-konten { padding: 1rem 1rem 2rem; }
  .ekin-topbar { padding: 0 .75rem; }
  .kepala-halaman h1 { font-size: 1.25rem; }
  .ekin-kaki { padding: .85rem 1rem; }
}
@media (max-width: 575.98px) {
  .ekin-pengguna .jabatan { display: none !important; }
  .ekin-pengguna .hai { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
  .kartu-isi { padding: 1rem; }
  .kepala-halaman .aksi { width: 100%; }
  .tabel-skp { font-size: .8125rem; }
}

/* MENGAPA position: relative: label .visually-hidden (position: absolute) di
   dalam sel tabel lebar lolos dari kliping .table-responsive dan melebarkan
   halaman di ponsel (form SKP Bulanan & Penilaian). Wadah yang ber-posisi
   membuat elemen absolut ikut tergulir di dalamnya. */
.table-responsive { position: relative; }

/* Ponsel: chip panjang (mis. "Kepala Perangkat Daerah: kegiatan langsung
   disetujui…") boleh terlipat alih-alih melebarkan halaman. */
@media (max-width: 575.98px) { .chip { white-space: normal; max-width: 100%; } }

/* ------------------------------------------------------------------ */
/* Tab tugas atasan (komponen/tab_atasan): Persetujuan · SKP · Penilaian */
/* ------------------------------------------------------------------ */
.tab-atasan { display: flex; gap: .25rem; border-bottom: 1px solid var(--ekin-garis); overflow-x: auto; scrollbar-width: thin; }
.tab-atasan a { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; color: var(--ekin-redup); text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 3px solid transparent; }
.tab-atasan a:hover { color: var(--ekin-hijau); }
.tab-atasan a.aktif { color: var(--ekin-hijau); border-bottom-color: var(--ekin-hijau); }
.lencana-tab { background: #d14334; color: #fff; border-radius: 99px; font-size: .7rem; padding: .05rem .45rem; font-weight: 700; }
@media (max-width: 575.98px) { .tab-atasan a { padding: .55rem .7rem; font-size: .88rem; } }

/* ------------------------------------------------------------------ */
/* Cetak (K14: HTML ramah-cetak, window.print())                       */
/* ------------------------------------------------------------------ */
.cetak-halaman { background: #fff; max-width: 1100px; margin: 1.5rem auto; padding: 2rem 2.25rem; border: 1px solid var(--ekin-garis); border-radius: 8px; }
.cetak-alat { max-width: 1100px; margin: 1rem auto 0; display: flex; gap: .5rem; justify-content: flex-end; }
/* Layar sempit: tabel cetak yang lebar digulir di dalam lembar, bukan melebarkan halaman. */
@media screen and (max-width: 991.98px) { .cetak-halaman { overflow-x: auto; margin: .75rem; padding: 1rem; } }
.cetak-kop { display: flex; align-items: center; gap: 1rem; border-bottom: 3px double #1d2b23; padding-bottom: .75rem; margin-bottom: 1.25rem; }
.cetak-kop img { width: 58px; }
.cetak-kop .instansi { font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.cetak-kop .sub { font-size: .8rem; }
.cetak-judul { text-align: center; font-weight: 800; font-size: 1.05rem; text-transform: uppercase; margin-bottom: .25rem; }
.cetak-subjudul { text-align: center; font-size: .9rem; margin-bottom: 1rem; }
.ttd { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; text-align: center; font-size: .9rem; }
.ttd .ruang { height: 72px; }
.ttd .nama { font-weight: 700; text-decoration: underline; }

@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff !important; font-size: 10.5pt; }
  .ekin-sidebar, .ekin-topbar, .ekin-kaki, .kolom-petunjuk, .no-print, .cetak-alat, .btn { display: none !important; }
  .ekin-konten { padding: 0 !important; }
  .kartu { border: 0 !important; box-shadow: none !important; }
  .cetak-halaman { border: 0; margin: 0; padding: 0; max-width: none; }
  .tabel-skp th, .tabel-skp td { border-color: #555 !important; }
  .tabel-skp thead th { background: #e8e8e8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tabel-skp tr { page-break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
}
.min-w-0 { min-width: 0; }