/* =========================================================================
   Lembar Peta Tematik Jawa Tengah — shared skin for Mubaligh Muhammadiyah
   Direction: surface brief resources-views-home-blade-php (direction contract)
   Loaded by: front/index.blade.php, base.blade.php, login.blade.php

   Kertas putih dominan; garis kontur & batas wilayah hijau sebagai satu-satunya
   sistem ornamen. Kedalaman hanya dari tumpukan dan garis — tanpa bayangan jatuh,
   tanpa blur dekoratif, tanpa gradien teks. Status tak pernah dipegang warna
   sendirian: selalu ada teks atau pola goresan.
   ========================================================================= */

:root {
  /* --- Kertas & tinta ------------------------------------------------- */
  --paper: #ffffff;
  --ink: #17191c;
  --mist: #f3f6f4;
  --fog: #f8faf9;
  --hair: #e6ebe8;
  --hair-strong: #d3dad6;

  --slate: #5f6663;        /* teks sekunder — 5.7:1 di atas kertas */
  --slate-soft: #767d7a;   /* placeholder / tersier — 4.6:1 di atas kertas */
  --ash: #9aa19d;          /* DEKORATIF saja, bukan teks */

  /* --- Garis kontur & batas wilayah (ornamen) -------------------------- */
  --line: #01a54d;         /* kontur muda — garis, bukan teks */
  --line-deep: #016f35;    /* batas wilayah — teks aksen & tombol isi */
  --line-ink: #01552c;     /* hover */
  --sel: #e7f7ee;          /* sel terpilih */
  --sel-2: #d3f5e3;

  /* --- Status (selalu berpasangan dengan label tertulis) -------------- */
  --no: #d8252b;
  --no-text: #a3161b;
  --no-bg: #fdeced;
  --wait-bg: #fdf8d2;
  --wait-text: #5f5100;
  --wait-line: #e8dc8a;

  /* --- Tipografi ------------------------------------------------------- */
  --font-serif: 'Source Serif 4', ui-serif, Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Bentuk ---------------------------------------------------------- */
  --r-card: 24px;
  --r-input: 16px;
  --r-pill: 9999px;
  --r-chip: 12px;

  /* --- Elevation: hairline dulu, bayangan hanya untuk lapisan teratas -- */
  --lift: 0 0 0 1px rgba(23, 25, 28, 0.05), 0 12px 28px -20px rgba(23, 25, 28, 0.45);
  --overlay: 0 0 0 1px rgba(23, 25, 28, 0.06), 0 24px 60px -34px rgba(23, 25, 28, 0.5);
  --popover: 0 0 0 1px rgba(23, 25, 28, 0.06), 0 10px 30px -22px rgba(23, 25, 28, 0.45);
}

/* ============================== Dasar ============================== */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--sel); color: var(--line-deep); }

input, textarea, select, button { font-family: inherit; caret-color: var(--ink); }

:focus-visible { outline: 2px solid var(--line-deep); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: var(--hair-strong) var(--fog); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--fog); }
*::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: var(--r-pill); border: 2px solid var(--fog); }
*::-webkit-scrollbar-thumb:hover { background: var(--ash); }

/* Judul: serif menunduk, bukan berteriak */
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); }

h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
}

h3 { font-size: 1.15rem; }
h4 { font-size: 1.05rem; }
h5, h6 { font-size: 0.95rem; }

b, strong { font-weight: 600; }

p, li { line-height: 1.6; }

a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

a:hover { color: var(--line-deep); text-decoration: underline; text-underline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--hair); opacity: 1; }

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

/* ======================= Ornamen: garis & busur ======================= */

/* Garis skala — pemisah section bergaya margin peta (tik + label ujung) */
.skala {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid var(--hair);
  padding-top: 0.6rem;
}

.skala::before {
  content: "";
  flex: 0 0 auto;
  width: 64px;
  height: 7px;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: 8px 100%;
  opacity: 0.7;
}

.skala > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Kode indeks wilayah — angka tabular kecil, ciri lembar peta */
.kode {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--line-deep);
}

/* Graticule: kisi tipis bertik untuk margin lembar */
.graticule {
  background-image:
    linear-gradient(to right, rgba(1, 165, 77, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(1, 165, 77, 0.16) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}

/* Kontur: beberapa busur sejajar — ornamen tanda tangan */
.kontur {
  background-image: repeating-linear-gradient(
    -8deg,
    transparent 0 17px,
    rgba(1, 165, 77, 0.22) 17px 18px
  );
}

/* Panel bertint hijau — sel terpilih pada lembar */
.panel-hijau {
  background: var(--sel);
  color: var(--line-deep);
  border-radius: var(--r-card);
}

.panel-hijau h1, .panel-hijau h2, .panel-hijau h3,
.panel-hijau h4, .panel-hijau p, .panel-hijau b, .panel-hijau strong {
  color: var(--line-deep);
}

/* --- Kompatibilitas kelas warisan (Steep) -----------------------------
   File blade yang belum disentuh tetap memakai nama kelas lama; di sini
   semuanya diterjemahkan ke bahasa lembar peta. */
.steep-sheet {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}

.steep-card {
  background: var(--mist);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}

.steep-artifact {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
}

.steep-peach, .card-steep-peach {
  background: var(--sel) !important;
  border: 1px solid var(--sel-2) !important;
  border-radius: var(--r-card);
  color: var(--line-deep);
}
.steep-peach h1, .steep-peach h2, .steep-peach h3, .steep-peach h4,
.steep-peach p, .steep-peach b, .steep-peach strong,
.card-steep-peach .card-body, .card-steep-peach .fas, .card-steep-peach .fa {
  color: var(--line-deep);
}

/* ====================== Tombol — satu bahasa ====================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: -0.005em;
  padding: 0.72rem 1.3rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: none !important;
}

.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn:focus-visible { outline: 2px solid var(--line-deep); outline-offset: 2px; }

.btn-primary {
  background: var(--line-deep);
  border-color: var(--line-deep);
  color: #fff !important;
}
.btn-primary:hover { background: var(--line-ink); border-color: var(--line-ink); color: #fff !important; }

.btn-success { background: var(--line-deep); border-color: var(--line-deep); color: #fff !important; }
.btn-success:hover { background: var(--line-ink); border-color: var(--line-ink); color: #fff !important; }

.btn-dark {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff !important;
}
.btn-dark:hover { background: #000; border-color: #000; color: #fff !important; }

.btn-danger {
  background: transparent;
  border-color: var(--no);
  color: var(--no-text) !important;
}
.btn-danger:hover { background: var(--no-bg); color: var(--no-text) !important; }

.btn-outline {
  background: var(--paper);
  border-color: var(--hair-strong);
  color: var(--ink) !important;
}
.btn-outline:hover { border-color: var(--line-deep); color: var(--line-deep) !important; background: var(--paper); }

.btn-secondary, .btn-default, .btn-light, .btn-info, .btn-warning,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-info, .btn-outline-warning, .btn-outline-danger,
.btn-outline-dark, .btn-outline-light {
  background: transparent !important;
  border: 1px solid var(--hair-strong) !important;
  color: var(--ink) !important;
}

.btn-secondary:hover, .btn-default:hover, .btn-light:hover, .btn-info:hover,
.btn-warning:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover,
.btn-outline-success:hover, .btn-outline-info:hover, .btn-outline-warning:hover,
.btn-outline-danger:hover, .btn-outline-dark:hover, .btn-outline-light:hover {
  background: var(--mist) !important;
  border-color: var(--line-deep) !important;
  color: var(--line-deep) !important;
}

.btn-ghost { background: transparent; border-color: transparent; color: var(--slate) !important; }
.btn-ghost:hover { background: var(--mist); color: var(--ink) !important; }

.btn-onDark {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff !important;
}
.btn-onDark:hover { background: rgba(255, 255, 255, 0.22); color: #fff !important; }

.btn-sm { padding: 0.5rem 0.95rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.95rem 1.7rem; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }
.btn.disabled, .btn:disabled { opacity: 0.45; pointer-events: none; }

.btn-group > .btn { margin: 0; }
.btn-group > .btn.active { background: var(--line-deep) !important; border-color: var(--line-deep) !important; color: #fff !important; }
.btn-circle { border-radius: var(--r-pill) !important; }

/* ====================== Permukaan & kartu ====================== */

.card {
  background: var(--paper);
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-card);
  box-shadow: none !important;
}

.card-body { padding: 24px; }

.card-header {
  background: transparent;
  border-top: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: 16px 24px;
}

.card-header h3, .card-header h4, .card-header h5 {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}

.card-footer {
  background: transparent;
  border-top: 1px solid var(--hair);
  border-radius: 0;
  padding: 14px 24px;
  color: var(--slate);
  font-size: 15px;
}

/* Panel bertint hijau (aksen editorial) — maksimal satu per halaman */
.card-hijau, .card.card-hijau { background: var(--sel) !important; border-color: var(--sel-2) !important; }
.card-hijau, .card-hijau h1, .card-hijau h2, .card-hijau h3, .card-hijau h4,
.card-hijau h5, .card-hijau p, .card-hijau b, .card-hijau strong,
.card-hijau .fas, .card-hijau .far, .card-hijau .fa, .card-hijau .text-primary {
  color: var(--line-deep) !important;
}
.card-hijau .card-header, .card-hijau .card-footer { border-color: rgba(1, 111, 53, 0.18); }

/* Lapisan teratas — satu-satunya permukaan yang boleh terangkat */
.card-teratas {
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: var(--lift) !important;
}

/* ====================== Shell admin ====================== */

.main-header.navbar {
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
  box-shadow: none;
  padding: 0;
}

.navbar-nav > .nav-item > .nav-link {
  color: var(--ink);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
}
.navbar-nav > .nav-item > .nav-link:hover { background: var(--mist); color: var(--line-deep); text-decoration: none; }

.main-sidebar { border-right: 1px solid var(--hair); }
.main-sidebar.sidebar-dark-primary { background: var(--paper) !important; }
.elevation-4 { box-shadow: none !important; }

.brand-link {
  background: transparent !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 0;
  padding: 0.85rem 0.6rem;
}
.brand-link:hover { text-decoration: none; }
.brand-text { color: var(--ink) !important; }

.user-panel { border-bottom: 1px solid var(--hair); }
.user-panel > .info > a { color: var(--ink) !important; font-weight: 600; }
.user-panel > .info > a:hover { color: var(--line-deep) !important; text-decoration: none; }

.sidebar .nav-sidebar .nav-link {
  color: var(--slate) !important;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.sidebar .nav-sidebar .nav-link .nav-icon,
.sidebar .nav-sidebar .nav-link .right,
.sidebar .nav-sidebar .nav-link .fas,
.sidebar .nav-sidebar .nav-link .far { color: inherit; }

.sidebar .nav-sidebar .nav-link:hover { background: var(--sel) !important; color: var(--line-deep) !important; text-decoration: none; }

.sidebar .nav-sidebar .nav-link.active { background: var(--line-deep) !important; color: #fff !important; }

.sidebar .nav-sidebar .nav-link.active .nav-icon,
.sidebar .nav-sidebar .nav-link.active .fas,
.sidebar .nav-sidebar .nav-link.active .far,
.sidebar .nav-sidebar .nav-link.active .right,
.sidebar .nav-sidebar .nav-link.active .fa-circle { color: #fff !important; }

.sidebar .nav-treeview .nav-link { border-radius: var(--r-pill); padding-left: 2rem; }
.sidebar .nav-treeview .nav-link.active,
.sidebar .nav-treeview .nav-link.active:hover { background: var(--sel) !important; color: var(--line-deep) !important; font-weight: 600; }
.sidebar .nav-treeview .nav-link.active .nav-icon,
.sidebar .nav-treeview .nav-link.active .far { color: var(--line-deep) !important; }

/* ====================== Konten & judul ====================== */

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

.content-header > .row > .col h1,
.content-header h1.m-0 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink) !important;
}

/* Rule skala di bawah judul halaman admin — ornamen lembar */
.content-header h1.m-0::after,
.content-header > .row > .col > h1::after {
  content: "";
  display: block;
  height: 7px;
  margin-top: 0.7rem;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: 8px 100%;
  background-repeat: repeat-x;
  opacity: 0.55;
}

@media (max-width: 768px) {
  .content-header > .row > .col h1,
  .content-header h1.m-0 { font-size: 24px; }
}

.content { padding-top: 1rem; }

.text-muted { color: var(--slate) !important; }
.text-dark { color: var(--ink) !important; }
.text-primary { color: var(--line-deep) !important; }
.text-success { color: var(--line-deep) !important; }
.text-info { color: #2c368b !important; }
.text-warning { color: #7a6000 !important; }
.text-danger { color: var(--no-text) !important; }
.bg-light { background-color: var(--fog) !important; }
.bg-dark { background-color: var(--ink) !important; }

/* ====================== Kartu statistik dashboard ====================== */

.small-box {
  border-radius: var(--r-card);
  border: 1px solid var(--hair);
  box-shadow: none;
  overflow: hidden;
  background: var(--paper) !important;
}

.small-box[class*='bg-'] { background: var(--paper) !important; }

.small-box .inner h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.small-box .inner p { color: var(--slate); font-size: 15px; font-weight: 600; }

.small-box .icon { color: var(--line); opacity: 0.3; }
.small-box .icon i { color: inherit; }

.small-box .small-box-footer {
  background: var(--sel) !important;
  color: #016f35 !important;
  font-weight: 600;
  font-size: 15px;
  transition: background-color 0.18s ease;
}
.small-box .small-box-footer i { color: inherit !important; }
.small-box .small-box-footer:hover { background: var(--sel-2) !important; color: #01552c !important; text-decoration: none; }

/* ====================== Tabel & DataTables ====================== */

.table { color: var(--ink); font-size: 15px; background: transparent; margin-bottom: 0; }

.table th {
  border-color: var(--hair) !important;
  color: var(--slate);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-top: none;
  padding: 0.7rem 0.6rem;
  white-space: nowrap;
}

.table td {
  border-color: var(--hair) !important;
  color: var(--ink);
  vertical-align: middle;
  padding: 0.7rem 0.6rem;
  font-variant-numeric: tabular-nums;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th { background-color: var(--fog); }

/* Kolom tabel admin (nowrap) bisa melebihi lebar kartu; gulir di dalam kartu
   alih-alih melewati tepi viewport sehingga tombol aksi tetap terjangkau. */
.card-body:has(table.dataTable) { overflow-x: auto; }

.table-hover > tbody > tr:hover > td { background-color: var(--sel); }

.dataTables_wrapper { color: var(--ink); font-size: 15px; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_info { color: var(--ink); }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-input);
  background: var(--paper);
  padding: 0.4rem 0.85rem;
  font-size: 15px;
  color: var(--ink);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  border-color: var(--line-deep);
  box-shadow: 0 0 0 3px rgba(1, 165, 77, 0.16);
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label { color: var(--slate); }

.dataTables_wrapper .dataTables_paginate { padding-top: 0.75rem; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--r-pill) !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink) !important;
  margin: 0 2px;
  padding: 0.28rem 0.72rem;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--sel) !important;
  color: var(--line-deep) !important;
  text-decoration: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--line-deep) !important;
  border: none !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: transparent !important;
  color: var(--ash) !important;
}

/* Integrasi Bootstrap4: tombol pagination dirender sebagai <li.paginate_button><a.page-link>.
   Aturan .page-link di bawah menimpa biru Bootstrap (#007bff). */
.dataTables_wrapper .dataTables_paginate .page-link {
  border-radius: var(--r-pill) !important;
  border: none !important;
  background: transparent !important;
  color: var(--line-deep) !important;
  margin: 0 2px;
  padding: 0.28rem 0.72rem;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.dataTables_wrapper .dataTables_paginate .page-link:hover {
  background: var(--sel) !important;
  color: #01552c !important;
  text-decoration: none;
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background: var(--line-deep) !important;
  border: none !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  background: transparent !important;
  border: none !important;
  color: var(--ash) !important;
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after { opacity: 0.4; }

/* ====================== Lencana & stempel ====================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  padding: 0.38em 0.85em;
  border: 1px solid transparent;
}

/* Terverifikasi — stempel hijau, teks berpasangan ikon */
.badge-success {
  background: var(--sel) !important;
  color: var(--line-deep) !important;
  border-color: var(--sel-2) !important;
}

/* Menunggu — pita teks berlabel, bukan rona */
.badge-warning {
  background: var(--wait-bg) !important;
  color: var(--wait-text) !important;
  border-color: var(--wait-line) !important;
}

/* Ditolak */
.badge-danger {
  background: var(--no-bg) !important;
  color: var(--no-text) !important;
  border-color: #f5c2c5 !important;
}

/* Kategori netral — cincin hairline */
.badge-info, .badge-secondary, .badge-light {
  background: var(--paper) !important;
  color: var(--slate) !important;
  border-color: var(--hair-strong) !important;
}

.badge-primary { background: var(--line-deep) !important; color: #fff !important; border-color: var(--line-deep) !important; }

/* ====================== Notifikasi ====================== */

.alert {
  background: var(--mist);
  border: 1px solid var(--hair);
  border-radius: var(--r-input);
  color: var(--ink);
  box-shadow: none;
  font-size: 16px;
}
.alert .alert-link { color: var(--ink); font-weight: 600; }

.alert-info { background: var(--sel) !important; border-color: var(--sel-2) !important; color: var(--line-deep) !important; }
.alert-success { background: var(--sel) !important; border-color: var(--sel-2) !important; color: var(--line-deep) !important; }
.alert-danger { background: var(--no-bg) !important; border-color: #f5c2c5 !important; color: var(--no-text) !important; }
.alert-warning { background: var(--wait-bg) !important; border-color: var(--wait-line) !important; color: var(--wait-text) !important; }

/* ====================== Formulir ====================== */

.form-control, .form-control:focus {
  border: 1px solid var(--hair-strong);
  background: var(--paper);
  border-radius: var(--r-input);
  font-size: 16px;
  color: var(--ink);
  padding: 0.58rem 0.9rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-control:focus {
  border-color: var(--line-deep);
  box-shadow: 0 0 0 3px rgba(1, 165, 77, 0.16);
  color: var(--ink);
}

.form-control::placeholder { color: var(--slate-soft); opacity: 1; }
.form-control:disabled, .form-control[readonly] { background: var(--mist); color: var(--slate); }

label { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; line-height: 1.4; }

.form-group { margin-bottom: 1rem; }

.input-group-text {
  background: var(--mist);
  border: 1px solid var(--hair-strong);
  color: var(--slate);
  border-radius: var(--r-input);
}

.input-group > .form-control:not(:first-child) { border-radius: var(--r-input); }

.custom-control-label, .custom-checkbox .custom-control-label { color: var(--ink); }

input[type='checkbox'], input[type='radio'], .custom-control-input ~ .custom-control-label::before {
  accent-color: var(--line-deep);
}

select.form-control, select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235f6663' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  padding-right: 2.25rem;
}

textarea.form-control { border-radius: var(--r-input); }

/* ====================== Modal & dropdown ====================== */

.modal-content {
  background: var(--paper);
  border: none;
  border-radius: var(--r-card);
  box-shadow: var(--overlay);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--hair); padding: 20px 24px; }
.modal-title { font-family: var(--font-sans); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.modal-body { padding: 24px; color: var(--ink); font-size: 16px; }
.modal-footer { border-top: 1px solid var(--hair); padding: 16px 24px; }
.close { color: var(--ink); opacity: 0.5; text-shadow: none; }
.close:hover { opacity: 1; }

.dropdown-menu {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-input);
  box-shadow: var(--popover);
  padding: 6px;
}
.dropdown-item { border-radius: 10px; color: var(--ink); font-size: 15px; padding: 0.45rem 0.85rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sel); color: var(--line-deep); text-decoration: none; }
.dropdown-divider { border-color: var(--hair); opacity: 1; }

/* Select2 */
.select2-container--default .select2-selection--single {
  background: var(--paper) !important;
  border: 1px solid var(--hair-strong) !important;
  border-radius: var(--r-input) !important;
  height: 42px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink);
  line-height: 40px;
  padding-left: 0.9rem;
  font-size: 16px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; right: 12px; }
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--line-deep) !important;
  box-shadow: 0 0 0 3px rgba(1, 165, 77, 0.16);
}
.select2-dropdown {
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-input);
  box-shadow: var(--popover);
  overflow: hidden;
}
.select2-results__option { border-radius: 10px; padding: 0.45rem 0.85rem; font-size: 15px; color: var(--ink); }
.select2-results__option--highlighted[aria-selected] { background: var(--line-deep) !important; color: #fff !important; }
.select2-search__field { border-radius: 10px !important; border: 1px solid var(--hair-strong) !important; }

/* Summernote */
.note-editor { border: 1px solid var(--hair) !important; border-radius: var(--r-input); overflow: hidden; }
.note-toolbar { background: var(--mist); border-bottom: 1px solid var(--hair) !important; }
.note-editing-area { background: var(--paper); }

/* ====================== SweetAlert2 ====================== */

.swal2-popup { border-radius: var(--r-card); font-family: var(--font-sans); color: var(--ink); font-size: 16px; box-shadow: var(--overlay); }
.swal2-title { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); letter-spacing: -0.02em; }
.swal2-html-container, .swal2-html-container:not(.swal2-html-container--show) { color: var(--slate); font-size: 16px; }

.swal2-confirm {
  background: var(--line-deep) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: none !important;
  padding: 0.6em 1.7em !important;
  font-weight: 600 !important;
}
.swal2-confirm:hover { background: var(--line-ink) !important; }

.swal2-cancel {
  background: transparent !important;
  border: 1px solid var(--hair-strong) !important;
  color: var(--ink) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.swal2-cancel:hover { border-color: var(--ink) !important; }

.swal2-icon { border-color: var(--hair) !important; color: var(--ink) !important; }
.swal2-icon .swal2-success-line, .swal2-icon .swal2-success-fix,
.swal2-icon [class*='swal2-x-mark'] { color: var(--ink) !important; border-color: var(--ink) !important; }
.swal2-icon .swal2-success-circular-line, .swal2-icon .swal2-success-circular-line-right { border-color: var(--hair) !important; }
.swal2-icon.swal2-success { border-color: var(--line-deep) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(1, 165, 77, 0.32) !important; }
.swal2-icon.swal2-success [class*='swal2-success-line'] { color: var(--line-deep) !important; border-color: var(--line-deep) !important; }
.swal2-icon.swal2-error { border-color: var(--no) !important; }
.swal2-icon.swal2-error [class*='swal2-x-mark'] { color: var(--no) !important; border-color: var(--no) !important; }

.swal2-input { border-radius: var(--r-input); border: 1px solid var(--hair-strong); }
.swal2-input:focus { border-color: var(--line-deep); box-shadow: 0 0 0 3px rgba(1, 165, 77, 0.16); }

/* ====================== Footer admin ====================== */

.main-footer {
  background: var(--paper);
  border-top: 1px solid var(--hair);
  color: var(--slate);
  font-size: 15px;
}
.main-footer strong { color: var(--ink); font-weight: 600; }

/* ============ ThemePunch front (halaman legacy) ============ */

.fw-semibold { font-weight: 600 !important; }
.border-bottom { border-color: var(--hair) !important; }

/* Kalimat biasa — tema lama mengeja semuanya huruf besar */
h1, h2, h3, h4, h5, h6, label, .table th, .section-title { text-transform: none !important; }

/* String panjang (surel, URL) harus membungkus */
#footer .widget, .feature-box, .fbox-content, address { overflow-wrap: anywhere; }

#page-title {
  background: var(--paper) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--hair);
  padding: 2.75rem 0 !important;
}
#page-title h1, #page-title h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.16;
  color: var(--ink);
}
#page-title p, #page-title small { color: var(--slate); font-size: 16px; }

#footer, #footer.dark {
  background: var(--fog) !important;
  color: var(--slate);
  border-top: 1px solid var(--hair);
}
#footer h4, #footer.dark h4 {
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
#footer p, #footer address, #footer abbr, #footer li, #footer .entry-meta, #footer .widget { color: var(--slate); font-size: 15px; }
#footer a, #footer .entry-title a, #footer .widget-links li a { color: var(--ink); }
#footer a:hover { color: var(--line-deep); }
#footer .entry-title h4, #footer .entry-title a { font-weight: 600; font-size: 15px; }
#footer abbr { text-decoration: none; border: 0; }

#copyrights {
  background: var(--paper) !important;
  border-top: 1px solid var(--hair);
  color: var(--slate);
  font-size: 14px;
}

#footer .social-icon {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-pill);
}
#footer .social-icon:hover { background: var(--line-deep); color: #fff; border-color: var(--line-deep); }

.fbox-icon, .fbox-icon a { background: var(--sel) !important; border-radius: var(--r-pill); }
.fbox-icon i, .fbox-icon a i { background: var(--sel) !important; color: var(--line-deep) !important; }
.feature-box h3, .feature-box h4 { color: var(--ink); font-weight: 600; }
.feature-box p { color: var(--slate); }

/* Panel samping — tinta gelap dengan busur hijau */
#side-panel { background: var(--ink) !important; }
#side-panel h4 { color: var(--paper); font-family: var(--font-serif); font-weight: 400; }
#side-panel label, #side-panel .quick-contact-form label { color: var(--ash); font-size: 14px; }
#side-panel input, #side-panel select, #side-panel .sm-form-control {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-input);
  color: var(--paper);
  font-size: 16px;
}
#side-panel input::placeholder { color: var(--ash); }
#side-panel select option { color: var(--ink); }
#side-panel .button { background: var(--paper); color: var(--ink); border: 0; border-radius: var(--r-pill); font-weight: 600; }
#side-panel .button:hover { background: var(--sel); color: var(--line-deep); }
#side-panel-trigger-close a { color: var(--paper); }
.body-overlay { background: rgba(23, 25, 28, 0.5); }

#gotoTop {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-pill);
  width: 44px;
  height: 44px;
}
#gotoTop:hover { background: var(--line-deep); color: #fff; border-color: var(--line-deep); }

/* ====================== Aksi tabel ====================== */

td.aksi-satu-baris { white-space: nowrap; }
td.aksi-satu-baris > a, td.aksi-satu-baris > button { margin: 0 3px; }
td.aksi-satu-baris > form { display: inline-block !important; margin: 0 3px; }

/* ====================== Responsif ====================== */

@media (max-width: 768px) {
  .card-body { padding: 18px; }
  .modal-content { border-radius: 20px; }
}