/* Arsip Peraturan BMT — aksen tunggal hijau koperasi, kontras AA. */
:root{
  --hijau:#0f6e52;
  --hijau-tua:#0a5340;
  --hijau-muda:#e7f3ee;
  --garis:#e3e8e6;
  --teks:#1c2422;
  --teks-lembut:#5c6b66;
}
html{ scroll-behavior:smooth; }
body{ background:#f6f8f7; color:var(--teks);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
/* angka & data: tabular figures agar rapi sejajar */
.angka,.kv dd,.table td,.table th,.badge{ font-variant-numeric:tabular-nums; }
h1,h2,h3,h4{ text-wrap:balance; }

.app-nav{ background:var(--hijau); box-shadow:0 1px 0 rgba(0,0,0,.06); }
.app-nav .navbar-brand,.app-nav .nav-link{ color:#eef6f2 !important; }
.app-nav .nav-link:hover,.app-nav .nav-link.active{ color:#fff !important; }
.app-nav .nav-link.active{ font-weight:600; }
.brand-mark{ width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);border-radius:8px;font-size:1.1rem;color:#fff; }
.brand-text{ line-height:1; font-weight:700; }
.brand-text small{ display:block; font-weight:400; font-size:.66rem; opacity:.85; }
.role-badge{ background:rgba(255,255,255,.22); font-size:.6rem; text-transform:capitalize; }
.notif-badge{ position:absolute; top:6px; right:2px; background:#d9534f; font-size:.6rem; }

h1,h2,h3,h4{ color:var(--hijau-tua); letter-spacing:-.01em; }
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.page-head h1{ font-size:1.5rem; margin:0; }

.card{ border:1px solid var(--garis); border-radius:12px;
  box-shadow:0 1px 2px rgba(15,110,82,.04), 0 8px 24px -16px rgba(15,110,82,.18); }
.card-stat{ background:#fff; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; }
.card-stat:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(15,110,82,.06), 0 16px 32px -18px rgba(15,110,82,.28); }
.card-stat .angka{ font-size:2rem; font-weight:700; color:var(--hijau-tua); line-height:1; letter-spacing:-.02em; }
.card-stat .label{ color:var(--teks-lembut); font-size:.85rem; }

.btn-hijau{ background:var(--hijau); border-color:var(--hijau); color:#fff; }
.btn-hijau:hover{ background:var(--hijau-tua); border-color:var(--hijau-tua); color:#fff; }
.btn-hijau:active{ transform:translateY(1px); }
a{ color:var(--hijau-tua); }

/* badge status */
.st{ font-size:.72rem; padding:.25em .6em; border-radius:999px; font-weight:600; }
.st-berlaku{ background:#e3f4ec; color:#0a5e44; }
.st-draf{ background:#eef0f2; color:#555; }
.st-diubah{ background:#fff4e0; color:#9a6700; }
.st-dicabut{ background:#fde9e7; color:#a32218; }
.st-diganti{ background:#f0e9fb; color:#5a3da8; }
.st-kedaluwarsa{ background:#fde9e7; color:#a32218; }

.pilar-pill{ font-size:.7rem; padding:.2em .55em; border-radius:6px; background:var(--hijau-muda); color:var(--hijau-tua); font-weight:600; }
.ent-pill{ font-size:.7rem; padding:.2em .55em; border-radius:6px; border:1px solid var(--garis); color:var(--teks-lembut); }

/* Hierarki */
.pilar-col{ background:#fff; border:1px solid var(--garis); border-radius:12px; padding:1rem; height:100%; }
.pilar-col h3{ font-size:1rem; border-bottom:2px solid var(--hijau-muda); padding-bottom:.5rem; }
.level-row{ border-left:3px solid var(--hijau-muda); padding:.4rem .75rem; margin:.4rem 0; }
.level-row .lvl-nama{ font-weight:600; font-size:.85rem; color:var(--hijau-tua); }
.level-row .dok-link{ display:block; font-size:.82rem; padding:.15rem 0; }
.level-kosong{ color:#aab3b0; font-size:.78rem; font-style:italic; }
.payung{ background:var(--hijau); color:#fff; border-radius:12px; padding:.9rem 1rem; text-align:center; font-weight:700; }
.cabang-card{ background:#fff; border:1px solid var(--garis); border-radius:12px; padding:1rem; }
.cabang-card h4{ font-size:.95rem; }

/* Timeline */
#timeline{ background:#fff; border:1px solid var(--garis); border-radius:12px; }
.vis-item.status-berlaku{ background:#e3f4ec; border-color:#0a5e44; color:#0a3a2b; }
.vis-item.status-dicabut,.vis-item.status-kedaluwarsa{ background:#fde9e7; border-color:#a32218; }
.vis-item.status-diubah{ background:#fff4e0; border-color:#9a6700; }
.vis-item.status-diganti{ background:#f0e9fb; border-color:#5a3da8; }
.vis-item.status-draf{ background:#eef0f2; border-color:#999; }

.empty{ text-align:center; padding:3rem 1rem; color:var(--teks-lembut); }
.empty i{ font-size:2.4rem; color:#c4ccc9; }

.snip{ background:var(--hijau-muda); border-radius:8px; padding:.6rem .8rem; font-size:.86rem; }
.disclaimer{ font-size:.78rem; color:var(--teks-lembut); border-top:1px dashed var(--garis); margin-top:.75rem; padding-top:.5rem; }
.login-wrap{ max-width:380px; margin:8vh auto; }
.login-card{ background:#fff; border:1px solid var(--garis); border-radius:14px; padding:2rem; }
.kv{ display:grid; grid-template-columns:170px 1fr; gap:.35rem .75rem; font-size:.9rem; }
.kv dt{ color:var(--teks-lembut); font-weight:500; }

/* --- Redesign pass: states, a11y, presence --- */
.btn{ transition:background-color .2s, border-color .2s, transform .08s, box-shadow .2s; }
.btn-hijau{ box-shadow:0 6px 16px -10px rgba(15,110,82,.6); }
.btn-hijau:active{ transform:translateY(1px); box-shadow:none; }
.app-nav .nav-link{ transition:color .15s; }
.table tbody tr{ transition:background-color .12s; }

/* Focus ring konsisten (keyboard a11y) — hijau, bukan biru default */
a:focus-visible, .btn:focus-visible, .form-control:focus, .form-select:focus,
.nav-link:focus-visible, button:focus-visible, summary:focus-visible{
  outline:none;
  box-shadow:0 0 0 .2rem rgba(15,110,82,.28);
  border-color:var(--hijau) !important;
}

/* Skip-to-content (muncul saat fokus keyboard) */
.skip-link{ position:absolute; left:.75rem; top:-3rem; z-index:1080;
  background:var(--hijau); color:#fff; padding:.5rem .9rem; border-radius:8px;
  transition:top .15s; }
.skip-link:focus{ top:.75rem; color:#fff; }

/* Latar login: ambient hijau lembut (bukan flat polos) */
body.login-bg{ background:
  radial-gradient(60vw 50vh at 85% -5%, rgba(15,110,82,.10), transparent 60%),
  radial-gradient(40vw 40vh at 0% 100%, rgba(15,110,82,.08), transparent 55%),
  #f6f8f7; }
.login-card{ box-shadow:0 1px 2px rgba(15,110,82,.05), 0 24px 60px -30px rgba(10,83,64,.4); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .card-stat, .btn, .table tbody tr{ transition:none; }
}

/* ============================================================
   v2 — Warna semantik per-menu + interaktivitas
   --accent di-set per halaman lewat <main style="--accent:..">
   ============================================================ */
:root{ --accent:#0f6e52; }

/* Tombol & link aksi ikut warna menu aktif */
.btn-hijau{ background:var(--accent); border-color:var(--accent);
  box-shadow:0 6px 16px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-hijau:hover{ background:color-mix(in srgb, var(--accent) 84%, #000);
  border-color:color-mix(in srgb, var(--accent) 84%, #000); color:#fff; }
.btn-hijau:active{ transform:translateY(1px); box-shadow:none; }
main a:not(.btn):not(.dropdown-item):not(.nav-link){ color:color-mix(in srgb, var(--accent) 90%, #0a3a2b); }

/* Judul halaman: ikon & garis-aksen mengikuti warna menu */
.page-head{ position:relative; padding-bottom:.85rem; border-bottom:1px solid var(--garis); }
.page-head::after{ content:""; position:absolute; left:0; bottom:-1px; width:60px; height:3px;
  border-radius:3px; background:var(--accent); }
.page-head h1 i, .page-head h1 .bi{ color:var(--accent); }
h2 i, h2 .bi{ color:var(--accent); }

/* Nav aktif: penanda garis bawah */
.app-nav .nav-link{ position:relative; }
.app-nav .nav-link.active::after{ content:""; position:absolute; left:.75rem; right:.75rem; bottom:2px;
  height:2px; background:#fff; border-radius:2px; }

/* Kartu: spotlight lembut mengikuti kursor + reveal */
.card-glow{ position:relative; overflow:hidden; }
.card-glow::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .25s; background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),
  color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.card-glow:hover::before{ opacity:1; }
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* --- KPI tiles berwarna (dashboard) --- */
.kpi{ position:relative; border:1px solid var(--garis); border-radius:14px; padding:1rem 1.1rem;
  background:#fff; overflow:hidden; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; }
.kpi:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -20px color-mix(in srgb, var(--k) 55%, transparent); }
.kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--k); }
.kpi .kpi-ico{ width:42px; height:42px; border-radius:11px; display:inline-flex; align-items:center;
  justify-content:center; font-size:1.25rem; color:var(--k);
  background:color-mix(in srgb, var(--k) 14%, #fff); }
.kpi .angka{ font-size:2.1rem; font-weight:800; line-height:1; letter-spacing:-.02em;
  color:color-mix(in srgb, var(--k) 78%, #11201b); font-variant-numeric:tabular-nums; }
.kpi .label{ color:var(--teks-lembut); font-size:.84rem; }
.kpi.k-hijau{ --k:#0f6e52; } .kpi.k-biru{ --k:#1f6feb; }
.kpi.k-oranye{ --k:#c2410c; } .kpi.k-ungu{ --k:#7c3aed; }
.kpi.k-merah{ --k:#c02a36; } .kpi.k-teal{ --k:#0d8a8a; }

/* --- Pilar & entitas: pil berwarna semantik --- */
.pilar-pill{ border:1px solid transparent; }
.pp-syariah{ background:#e3f4ec; color:#0a5e44; border-color:#bfe6d4; }
.pp-hukum{ background:#e8e9fd; color:#3730a3; border-color:#cdd0fb; }
.pp-internal{ background:#fdeede; color:#9a4708; border-color:#f7d9b3; }
.ent-tamwil{ background:#e6f0fe; color:#1456b8; border-color:#c5dcfb; }
.ent-maal{ background:#fce7f0; color:#9d174d; border-color:#f6c8db; }
.ent-umum{ background:#eef1f4; color:#475569; border-color:#dde3ea; }

/* Baris tabel: garis-kiri berwarna pilar + hover lembut */
.tbl-pilar tbody tr{ box-shadow:inset 3px 0 0 var(--garis); }
.tbl-pilar tbody tr:hover{ background:color-mix(in srgb, var(--accent) 6%, #fff); }
tr.row-syariah{ box-shadow:inset 3px 0 0 #0f6e52 !important; }
tr.row-hukum{ box-shadow:inset 3px 0 0 #4f46e5 !important; }
tr.row-internal{ box-shadow:inset 3px 0 0 #c2410c !important; }

/* Hierarki: tiap pilar punya warna kolomnya */
.pilar-col.col-syariah{ --pc:#0f6e52; } .pilar-col.col-hukum{ --pc:#4f46e5; }
.pilar-col[class*="col-"]{ border-top:3px solid var(--pc, var(--hijau)); }
.pilar-col[class*="col-"] h3{ color:var(--pc, var(--hijau-tua)); border-bottom-color:color-mix(in srgb, var(--pc) 22%, #fff); }
.pilar-col[class*="col-"] .level-row{ border-left-color:color-mix(in srgb, var(--pc) 32%, #fff); transition:background .15s, border-color .15s; }
.pilar-col[class*="col-"] .level-row:hover{ background:color-mix(in srgb, var(--pc) 7%, #fff); border-left-color:var(--pc); }
.cabang-card.cab-tamwil{ border-top:3px solid #1f6feb; }
.cabang-card.cab-maal{ border-top:3px solid #be185d; }
.cabang-card .level-row:hover{ background:#f4f7f9; }

/* Ikon menu di nav diberi warna saat hover/aktif (aksen putih lembut) */
.app-nav .nav-link .bi{ transition:transform .15s; }
.app-nav .nav-link:hover .bi{ transform:translateY(-1px); }