/* =====================================================================
   Raport Digital Yayasan Assaidah Ilyas Hamid — tema hijau
   ===================================================================== */
:root{
  --hijau-tua:#0d3b2a;
  --hijau-tua2:#12513a;
  --hijau:#16a34a;
  --hijau-2:#059669;
  /* Warna tombol (lebih tua dari --hijau/--hijau-2) supaya teks putih di atasnya
     lolos kontras WCAG AA ≥4.5:1. --hijau tetap dipakai untuk ikon, garis fokus,
     dan aksen yang tidak berisi teks putih. */
  --tombol:#15803d;
  --tombol-2:#047857;
  --teal:#0f766e;
  --ink:#10221b;
  --muted:#5c7268;
  --line:rgba(13,59,42,.12);
  --card:rgba(255,255,255,.66);
  --card-solid:#ffffff;
  --radius:16px;
  --shadow:0 18px 40px -22px rgba(6,58,40,.45);
  --shadow-sm:0 8px 22px -16px rgba(6,58,40,.5);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);font-size:15px;line-height:1.55;
}
/* ---------- Latar ---------- */
body.app,body.auth{
  background:
    radial-gradient(60vw 60vw at 8% 0%, rgba(22,163,74,.20), transparent 60%),
    radial-gradient(50vw 50vw at 95% 8%, rgba(13,148,136,.18), transparent 60%),
    radial-gradient(45vw 45vw at 70% 95%, rgba(132,204,22,.16), transparent 60%),
    linear-gradient(160deg,#f3fbf6 0%, #eef8f1 55%, #e9f5ef 100%);
  min-height:100vh;
}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:264px;z-index:30;
  background:linear-gradient(180deg,var(--hijau-tua) 0%, var(--hijau-tua2) 60%, #0b3527 100%);
  color:#e6f4ec;display:flex;flex-direction:column;padding:18px 14px;
  box-shadow:8px 0 30px -22px rgba(0,0,0,.7);
}
.brand{display:flex;gap:12px;align-items:center;padding:6px 8px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:14px}
.brand-link{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;min-width:0}
.brand-link:hover{text-decoration:none;opacity:.92}
.brand img{width:44px;height:44px;object-fit:contain;background:rgba(255,255,255,.92);border-radius:12px;padding:4px}
.brand .brand-mark{width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:linear-gradient(135deg,var(--hijau),#65a30d);display:grid;place-items:center;font-weight:800;font-size:20px;color:#fff}
.brand strong{display:block;font-size:15px;letter-spacing:.2px}
.brand small{display:block;font-size:11px;color:#a7d9c0;line-height:1.35;margin-top:2px}
.sidebar nav{display:flex;flex-direction:column;gap:4px;overflow-y:auto;flex:1}
/* Semua label menu HURUF KAPITAL (permintaan user).
   PENTING: aturan ini WAJIB ditulis untuk ketiga selektor. `.sidebar nav` saja tidak cukup karena
   menu induk yang punya sub-menu dirender sebagai <button class="menu-induk">, dan peramban
   memberikan `text-transform:none` bawaan pada kontrol form (button/input/select) sehingga
   tombol TIDAK mewarisi uppercase dari induknya. Sub-menu juga ditulis eksplisit agar aman. */
.sidebar nav,
.sidebar nav a,
.sidebar nav .menu-induk,
.sidebar nav .submenu a{text-transform:uppercase;letter-spacing:.02em}
/* Menu utama: tautan biasa DAN tombol menu-ber-sublmenu WAJIB identik (dulu tombol <button>
   tidak mendapat aturan ini sehingga tinggi, padding, font, dan posisi ikonnya berbeda). */
.sidebar nav a,
.sidebar nav .menu-induk{
  display:flex;align-items:center;gap:11px;color:#dcefe4;padding:10px 12px;border-radius:12px;
  font-size:14px;font-weight:500;line-height:1.55;transition:.15s;
}
.sidebar nav .menu-induk{
  width:100%;text-align:left;background:none;border:none;font-family:inherit;cursor:pointer;
}
.sidebar nav a:hover,
.sidebar nav .menu-induk:hover{background:rgba(255,255,255,.10);text-decoration:none}
.sidebar nav a.on,
.sidebar nav .menu-induk.on{
  background:linear-gradient(135deg,#22c55e,#0f9d58);color:#062b1c;font-weight:700;
  box-shadow:0 10px 20px -14px rgba(0,0,0,.9);
}
.sidebar nav .menu-induk > span:not(.ico):not(.caret){line-height:1.35}
/* submenu di sidebar */
.sidebar nav .menu-induk .caret{margin-left:auto;font-size:11px;opacity:.75;transition:transform .18s ease}
.sidebar nav .menu-induk.open .caret{transform:rotate(180deg)}
/* semua sub-menu tersembunyi; hanya muncul saat menu induk diklik · rata dengan teks induknya */
.sidebar nav .submenu{display:none;flex-direction:column;gap:2px;margin:2px 0 4px 8px;
  border-left:1px solid rgba(255,255,255,.18);padding-left:10px}
.sidebar nav .submenu.open{display:flex}
.sidebar nav .submenu a{padding:7px 9px;font-size:12.5px;border-radius:9px;color:#cfe7db;gap:8px}
.sidebar nav .submenu a:hover{background:rgba(255,255,255,.10)}
.sidebar nav .submenu a.on{background:rgba(34,197,94,.22);color:#eafff2;font-weight:700;box-shadow:none}
.sidebar nav .submenu .dot{width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:currentColor;opacity:.65;margin-top:1px}
.sidebar nav .submenu a.on .dot{opacity:1;background:#4ade80}
/* 4 halaman perkembangan */
/* menempel DI BAWAH bar identitas (tingginya diukur JS → --brandbar-h) */
.tabs.tabs-sub{position:sticky;top:var(--brandbar-h,0px);z-index:5;background:rgba(243,251,246,.92);backdrop-filter:blur(8px);
  padding:8px 0;border-bottom:1px solid var(--line)}
@media (max-width:900px){
  .tabs.tabs-sub{overflow-x:auto;flex-wrap:nowrap;gap:6px}
  .tabs.tabs-sub a{white-space:nowrap;font-size:12px;padding:7px 10px}
}
.sidebar-foot{border-top:1px solid rgba(255,255,255,.12);padding-top:12px;margin-top:10px}
.unit-tag{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9ed3b8;margin-bottom:8px}
.btn-logout{display:block;text-align:center;background:rgba(255,255,255,.10);color:#fff;padding:9px;border-radius:10px;font-size:13px;font-weight:600}
.btn-logout:hover{background:rgba(255,255,255,.2);text-decoration:none}

/* ---------- Ikon (CSS mask) ---------- */
.ico{width:18px;height:18px;flex:0 0 18px;display:inline-block;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.ico-grid{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
.ico-book{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 3v18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 3v18'/%3E%3C/svg%3E")}
.ico-pencil{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M16 3l5 5L8 21H3v-5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M16 3l5 5L8 21H3v-5z'/%3E%3C/svg%3E")}
.ico-heart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 20s-7-4.6-7-9.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 7 3.5C19 15.4 12 20 12 20z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 20s-7-4.6-7-9.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 7 3.5C19 15.4 12 20 12 20z'/%3E%3C/svg%3E")}
.ico-table{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M3 15h18M9 4v16'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M3 15h18M9 4v16'/%3E%3C/svg%3E")}
.ico-print{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M7 9V3h10v6M7 19H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2'/%3E%3Crect x='7' y='14' width='10' height='7' rx='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M7 9V3h10v6M7 19H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2'/%3E%3Crect x='7' y='14' width='10' height='7' rx='1'/%3E%3C/svg%3E")}
.ico-list{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E")}
.ico-building{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 21V6l8-3 8 3v15'/%3E%3Cpath d='M9 21v-5h6v5M9 9h.01M15 9h.01M9 13h.01M15 13h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 21V6l8-3 8 3v15'/%3E%3Cpath d='M9 21v-5h6v5M9 9h.01M15 9h.01M9 13h.01M15 13h.01'/%3E%3C/svg%3E")}
.ico-users{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0M16 11a3 3 0 1 0 0-6M21 20a5.5 5.5 0 0 0-4-5.3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0M16 11a3 3 0 1 0 0-6M21 20a5.5 5.5 0 0 0-4-5.3'/%3E%3C/svg%3E")}
.ico-clipboard{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M9 4h6a1 1 0 0 1 1 1v1H8V5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8 6H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M9 4h6a1 1 0 0 1 1 1v1H8V5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8 6H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E")}
.ico-wallet{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2.5' y='6' width='19' height='13' rx='2.5'/%3E%3Cpath d='M2.5 10h19M16.5 14.5h2.5'/%3E%3Cpath d='M5.5 6a1.8 1.8 0 0 1 1.8-1.8h9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2.5' y='6' width='19' height='13' rx='2.5'/%3E%3Cpath d='M2.5 10h19M16.5 14.5h2.5'/%3E%3Cpath d='M5.5 6a1.8 1.8 0 0 1 1.8-1.8h9'/%3E%3C/svg%3E")}
.ico-logout{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3'/%3E%3Cpath d='M10 8l-4 4 4 4M6 12h9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3'/%3E%3Cpath d='M10 8l-4 4 4 4M6 12h9'/%3E%3C/svg%3E")}
.ico-cog{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E")}
.ico-user{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E")}
.ico-star{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z'/%3E%3C/svg%3E")}

/* ---------- Layout utama ---------- */
.main{margin-left:264px;min-height:100vh;display:flex;flex-direction:column;padding:22px 26px 40px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.topbar h1{font-size:23px;margin:0;letter-spacing:-.2px}
.topbar .sub{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.content{flex:1;display:flex;flex-direction:column;gap:26px}
.foot{margin-top:30px;color:var(--muted);font-size:12px;text-align:center}
.flash{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:14px;border:1px solid;backdrop-filter:blur(12px)}
.flash.ok{background:rgba(220,252,231,.8);border-color:#86efac;color:#14532d}
.flash.err{background:rgba(254,226,226,.85);border-color:#fca5a5;color:#7f1d1d}
.flash.info{background:rgba(219,234,254,.8);border-color:#93c5fd;color:#1e3a8a}

/* ---------- Kartu ---------- */
.card{
  background:var(--card);border:1px solid rgba(255,255,255,.75);border-radius:var(--radius);
  box-shadow:var(--shadow);backdrop-filter:blur(20px) saturate(180%);padding:22px 24px;
}
.card.solid{background:var(--card-solid);backdrop-filter:none}
.card h2{margin:0 0 4px;font-size:17px}
.card h3{margin:0 0 4px;font-size:15px}
.card .hint{margin:0 0 16px;color:var(--muted);font-size:13px}
.card-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.grid{display:grid;gap:20px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.stat{position:relative;overflow:hidden}
.stat .label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.stat .value{font-size:30px;font-weight:800;letter-spacing:-1px;margin-top:6px}
.stat .note{font-size:12.5px;color:var(--muted);margin-top:2px}
.stat::after{content:'';position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg,rgba(22,163,74,.22),rgba(13,148,136,.10))}

/* ---------- Tombol ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;
  padding:10px 16px;border-radius:11px;background:linear-gradient(135deg,var(--tombol),var(--tombol-2));color:#fff;
  box-shadow:0 12px 24px -16px rgba(6,58,40,.85);transition:.15s}
.btn:hover{filter:brightness(1.06);text-decoration:none}
.btn.ghost{background:rgba(255,255,255,.7);color:var(--hijau-tua);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:#fff}
.btn.dark{background:linear-gradient(135deg,var(--hijau-tua),var(--hijau-tua2))}
.btn.danger{background:linear-gradient(135deg,#dc2626,#b91c1c)}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Form ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:#25392f;margin-bottom:5px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=email],select,textarea{
  width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.9);
  font:inherit;font-size:14px;color:var(--ink);outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--hijau);box-shadow:0 0 0 3px rgba(22,163,74,.16);background:#fff}
textarea{min-height:84px;resize:vertical;line-height:1.5}
.form-row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.field{margin-bottom:14px}
.help{font-size:11.5px;color:var(--muted);margin-top:4px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.inline{display:flex;gap:10px;align-items:center}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500}
.check input{width:auto}

/* ---------- Tabel ---------- */
.table-wrap{overflow:auto;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.82)}
table.data{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px}
table.data th,table.data td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.data thead th{background:linear-gradient(180deg,#eafaf0,#ddf3e6);position:sticky;top:0;z-index:2;font-size:12.5px;color:#14432f;border-bottom:1px solid #bfe3cd}
table.data tbody tr:hover{background:rgba(22,163,74,.06)}
table.data tfoot td,table.data tr.total td{background:#f2fbf5;font-weight:700}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data .sticky-col{position:sticky;left:0;background:#fff;z-index:1}
table.data thead .sticky-col{background:#ddf3e6;z-index:3}
table.data input[type=number],table.data input[type=text]{padding:6px 8px;font-size:13px;min-width:74px;border-radius:8px}
table.data input.wide{min-width:150px}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:#e6f6ec;color:#14532d}
.pill.Ap{background:#c7f0d6;color:#0b3d24}
.pill.A{background:#dcf5e4;color:#14532d}
.pill.Bp{background:#e3f6d3;color:#2f5c10}
.pill.B{background:#eaf7d9;color:#3f6212}
.pill.C{background:#fef6db;color:#854d0e}
.pill.D{background:#ffe7d6;color:#9a3412}
.pill.E{background:#fde2e2;color:#991b1b}
.pill.off{background:#eef2f0;color:#5c7268}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.grow{flex:1}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tabs a{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.65);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--hijau-tua)}
.tabs a.on{background:linear-gradient(135deg,var(--tombol),var(--tombol-2));color:#fff;border-color:transparent}
.tabs a:hover{text-decoration:none;background:#fff}
.empty{padding:18px;text-align:center;color:var(--muted);font-size:13.5px}

/* ---------- Tombol menu (hanya tampil di layar kecil) ---------- */
.nav-toggle{display:none;align-items:center;justify-content:center;gap:7px;cursor:pointer;font:inherit;
  font-size:13px;font-weight:700;color:var(--hijau-tua);background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:9px 12px;flex:0 0 auto;order:-1}
.nav-toggle:hover{background:#f4fbf6}
.nav-toggle:active{transform:scale(.97)}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:3px}
.nav-toggle .bars i{display:block;width:16px;height:2px;border-radius:2px;background:currentColor}
.nav-toggle .lbl{white-space:nowrap}
.nav-backdrop{position:fixed;inset:0;background:rgba(6,32,22,.45);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:55}
.btn-nav-close{display:none;margin-left:auto;flex:0 0 auto;cursor:pointer;font:inherit;font-size:16px;line-height:1;
  color:#dcefe4;background:rgba(255,255,255,.12);border:none;border-radius:10px;padding:7px 10px}
.btn-nav-close:hover{background:rgba(255,255,255,.22)}

/* ---------- Identitas lembaga di atas dashboard ---------- */
/* Pembungkus MENEMPEL (sticky): logo, nama Yayasan, nama aplikasi, & nama akun
   tetap terlihat saat halaman digulir.
   PERMINTAAN USER (18 Okt): pitanya HIJAU TUA dan LEBARNYA PENUH — menempel ke menu samping,
   menempel ke tepi ATAS halaman, dan menempel ke tepi KANAN (tanpa jarak, tanpa sudut membulat).
   Caranya: `.brandbar-wrap` diberi margin negatif sebesar padding `.main` (22px 26px),
   sehingga pitanya melebar sampai tepi kotak `.main` (= tepi sidebar & tepi jendela).
   PENTING: margin negatif itu HARUS sama dengan nilai padding `.main` di setiap breakpoint
   (lihat @media 900px & 380px di bawah). Kalau padding `.main` diubah, ubah margin di sini juga. */
.brandbar-wrap{
  position:sticky;top:0;z-index:25;
  margin:-22px -26px 18px;
  padding:0;
  background:var(--hijau-tua);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 24px -22px rgba(6,58,40,.85);
}
.brandbar{
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  background:none;border:0;border-radius:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  /* padding kiri/kanan = padding .main supaya isi bar sejajar dengan isi halaman di bawahnya */
  padding:11px 26px;margin:0;color:#fff;
}
.brandbar-kiri{display:flex;align-items:center;gap:15px;min-width:0}
.brandbar-kanan{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 1 auto;min-width:0;text-align:right}
/* Tombol keluar cepat di samping nama akun (di atas bar hijau tua → teks putih) */
.btn-keluar{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-size:12px;font-weight:700;line-height:1;color:#fff;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.42);border-radius:999px;
  padding:6px 11px;transition:.15s;white-space:nowrap;
}
.btn-keluar:hover{background:#fff;border-color:#fff;color:#b91c1c;text-decoration:none}
.btn-keluar:active{transform:scale(.97)}
.btn-keluar .ico{width:14px;height:14px;flex:0 0 14px}
.brandbar-icon{width:56px;height:56px;flex:0 0 56px;object-fit:contain;border-radius:13px;
  /* Berkas ikon yang diunggah admin umumnya PNG berlatar PUTIH. Di atas bar hijau tua, latar putih itu
     akan tampak sebagai kotak — jadi ikon diberi TL berwarna putih bersudut membulat (logo tampil
     di dalamnya, tepi kotaknya tidak terlihat). `multiply` TIDAK dipakai lagi karena pada latar gelap
     akan menggelapkan warna logo. */
  background:#fff;padding:3px;box-shadow:none;mix-blend-mode:normal}
.brandbar-icon-fallback{display:grid;place-items:center;font-weight:800;font-size:26px;color:#fff;
  background:linear-gradient(135deg,var(--hijau),var(--teal));mix-blend-mode:normal;border-radius:13px;padding:0}
.brandbar-teks{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.brandbar-teks strong{
  font-size:20px;line-height:1.2;letter-spacing:.4px;text-transform:uppercase;color:#fff;
}
@media (max-width:1250px){
  .brandbar-teks strong{font-size:17px}
  .brandbar-akun{font-size:11.5px}
  .brandbar-akun .bk-unit{display:none}
}
@media (max-width:1050px){
  .brandbar-teks strong{font-size:15.5px}
  .brandbar-teks span{font-size:13px}
  .brandbar-icon{width:48px;height:48px;flex-basis:48px}
}
.brandbar-teks span{font-size:14px;color:rgba(255,255,255,.84);margin-top:3px;letter-spacing:.2px}
.brandbar-akun{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  font-size:12px;line-height:1.35;color:#e2f1e8;
  text-align:right;min-width:0;max-width:100%;
}
.brandbar-akun .ico{width:13px;height:13px;flex:0 0 13px;opacity:.9}
.brandbar-akun{overflow:hidden}
.brandbar-akun .bk-nama{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.brandbar-akun .bk-peran{white-space:nowrap;flex:0 0 auto}
/* peran & unit di bar hijau tua → hijau muda terang (kontras ≥8:1) */
.brandbar-akun em{font-style:normal;color:#b7d8c7}
/* tombol menu (HP) ikut gaya bar gelap: putih transparan, bukan kotak putih penuh */
.brandbar .nav-toggle{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.30)}
.brandbar .nav-toggle:hover{background:rgba(255,255,255,.22)}
@media (max-width:900px){
  /* HP: unit tidak diulang di sini (sudah tampil di menu) agar nama & peran terbaca penuh */
  .brandbar-akun .bk-unit{display:none}
  /* HP: tombol menu berada di bar identitas, tepat di samping icon yayasan */
  .nav-toggle{display:inline-flex;font-size:12.5px;padding:8px 11px;order:-1}
  /* pita hijau tetap penuh: margin negatif = padding .main (14px 12px) di breakpoint ini */
  .brandbar-wrap{margin:-14px -12px 16px;padding:0}
  .brandbar{padding:10px 12px;gap:8px 10px;margin:0;flex-wrap:wrap}
  /* HP: tombol keluar dipadatkan (ikon + teks kecil) agar tetap sebaris dengan nama akun */
  .btn-keluar{padding:6px 9px;font-size:11px;gap:5px;border-radius:9px}
  .btn-keluar .ico{width:13px;height:13px;flex:0 0 13px}
  .brandbar-kiri{flex:1 1 auto}
  .brandbar-kanan{flex:0 0 auto;margin-left:auto}
  .brandbar-icon{width:32px;height:32px;flex-basis:32px;border-radius:8px;padding:2px}
  .brandbar-icon-fallback{font-size:16px}
  .brandbar-teks strong{font-size:14px;letter-spacing:.2px;line-height:1.25}
  .brandbar-teks span{font-size:12px;margin-top:2px}
  .brandbar-akun{font-size:11px;gap:5px}
  .brandbar-akun .ico{display:none}
}
@media (max-width:430px){
  /* layar sangat sempit: tombol keluar jadi ikon saja (tetap ada title untuk tooltip) */
  .btn-keluar{padding:7px;gap:0}
  .btn-keluar .lbl{display:none}
  .brandbar-kanan{gap:7px}
}
@media (max-width:400px){
  .brandbar{padding:9px 12px;gap:9px}
  .brandbar-icon{width:28px;height:28px;flex-basis:28px;border-radius:7px;padding:2px}
  .brandbar-icon-fallback{font-size:14px}
  .brandbar-teks strong{font-size:13px}
  .brandbar-teks span{font-size:11.5px}
  .brandbar-akun{font-size:10.5px}
}

/* ---------- Tombol pasang PWA ---------- */
.btn-pwa{display:block;width:100%;margin-bottom:10px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;
  color:#062b1c;background:linear-gradient(135deg,#4ade80,#22c55e);border:none;border-radius:10px;padding:9px 10px}
.btn-pwa:hover{filter:brightness(1.05)}

/* ---------- Login ---------- */
body.auth{display:grid;place-items:center;padding:24px}
.login-card{width:100%;max-width:420px;background:rgba(255,255,255,.72);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);border-radius:22px;box-shadow:0 30px 60px -30px rgba(6,58,40,.55);padding:32px 30px}
/* Brand login: logo → nama Yayasan → nama aplikasi, semuanya rata tengah */
.login-card .brand-lg{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;margin-bottom:24px;
}
/* Logo login = PNG transparan: tanpa kotak/latar putih, tanpa padding & bayangan kotak */
.login-card .brand-lg img{
  width:96px;height:96px;object-fit:contain;background:none;padding:0;border-radius:0;
  box-shadow:none;filter:drop-shadow(0 10px 18px rgba(6,58,40,.18));
  margin-bottom:14px;
}
.login-card .brand-yayasan{
  margin:0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hijau-tua);line-height:1.4;max-width:100%;
}
.login-card h1{
  font-size:21px;margin:7px 0 0;line-height:1.25;letter-spacing:-.2px;color:var(--ink);
  max-width:100%;overflow-wrap:anywhere;
}
.login-card p.tag{margin:7px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.login-card .btn{width:100%;justify-content:center;padding:12px}
.login-note{margin-top:18px;font-size:12px;color:var(--muted);background:rgba(22,163,74,.08);border:1px dashed rgba(22,163,74,.35);padding:10px 12px;border-radius:10px}

@media (max-width:900px){
  /* Menu jadi panel geser dari SISI KIRI, lebar setengah layar */
  .sidebar{
    position:fixed;top:0;left:0;right:auto;bottom:0;
    width:50%;min-width:168px;max-width:80vw;
    transform:translateX(-100%);transition:transform .24s ease;
    z-index:60;padding:14px 12px;overflow-y:auto;
    box-shadow:14px 0 34px -18px rgba(0,0,0,.75);
  }
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open{overflow:hidden}
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
  .sidebar nav{flex-direction:column;flex-wrap:nowrap;gap:3px;overflow-y:auto}
  .sidebar nav a,
  .sidebar nav .menu-induk{padding:11px 10px;font-size:13.5px;gap:9px}
  .sidebar nav a span:last-child,
  .sidebar nav .menu-induk > span:not(.ico):not(.caret){line-height:1.25}
  .sidebar nav .submenu{margin-left:8px;padding-left:9px}
  .btn-nav-close{display:block}
  .brand{flex-wrap:wrap;padding:4px 4px 12px;gap:10px}
  .brand img{width:38px;height:38px}
  .brand strong{font-size:14px}
  .brand small{font-size:10.5px}
  .btn-pwa{font-size:12px;padding:9px 8px}
  .main{margin-left:0;padding:14px 12px 34px}
  .topbar{flex-wrap:wrap;gap:12px}
  .grid{gap:14px}
  .card{padding:15px 14px}
  /* Dashboard di HP: kartu ringkasan jadi segi empat tertata (2 kolom, tinggi seragam) */
  .grid.cols-4{grid-template-columns:repeat(2,1fr);gap:12px}
  .grid.cols-4>.card{min-height:96px;display:flex;flex-direction:column;justify-content:center;border-radius:14px}
  .grid.cols-4 .stat .label{font-size:11px;letter-spacing:.04em;line-height:1.25}
  .grid.cols-4 .stat .value{font-size:24px;letter-spacing:-.5px;margin-top:2px;line-height:1.1}
  .grid.cols-4 .stat .note{font-size:11px;line-height:1.3;margin-top:2px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .grid.cols-4 .stat::after{width:76px;height:76px;right:-22px;top:-22px}
  /* kartu ringkasan di dalam kartu (mis. hari efektif) tetap rapi */
  .card .grid.cols-4{gap:10px}
  .card .grid.cols-4>.card{min-height:78px;padding:12px 11px}
  .tabs a{padding:7px 11px;font-size:12.5px}
}
@media (max-width:430px){
  .nav-toggle .lbl{display:none}
  .brandbar-akun{font-size:10px;gap:4px}
  /* tetap setengah layar; rapatkan isi agar semua menu terbaca */
  .sidebar{padding:12px 9px}
  .sidebar nav a,
  .sidebar nav .menu-induk{padding:10px 8px;font-size:13px;gap:8px}
  .sidebar nav a .ico,
  .sidebar nav .menu-induk .ico{width:16px;height:16px;flex:0 0 16px}
  .brand img{width:34px;height:34px}
  .brand strong{font-size:13px}
  .brand small{font-size:10px}
}

/* ---------- HP kecil (<=430px): kartu ringkasan lebih mungil, tetap 2 kolom ---------- */
@media (max-width:430px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr);gap:10px}
  .grid.cols-4>.card{min-height:86px;padding:12px 11px;border-radius:13px}
  .grid.cols-4 .stat .label{font-size:10.5px}
  .grid.cols-4 .stat .value{font-size:21px}
  .grid.cols-4 .stat .note{font-size:10.5px;-webkit-line-clamp:2}
  .card .grid.cols-4>.card{min-height:70px;padding:10px}
}

/* ---------- Layar sangat sempit (<=380px) ----------
   Grid tema memakai minmax(320px,1fr); di layar 320px itu membuat halaman bergeser
   ke samping. Paksa satu kolom agar semua halaman (admin) tetap rapi. */
@media (max-width:380px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:minmax(0,1fr)}
  .grid{gap:12px}
  .card{padding:14px 12px}
  .main{padding:12px 10px 32px}
  /* WAJIB sejajar dengan padding .main di atas (10px) supaya pita tetap menempel tepi layar */
  .brandbar-wrap{margin:-12px -10px 15px}
  .brandbar{padding:9px 10px}
  .form-row{grid-template-columns:minmax(0,1fr)}
  .tools > div,.tools .grow{min-width:0;width:100%}
  .tabs a{padding:6px 10px;font-size:12px}
}

/* ---------- Cetak: bar identitas & menu tidak ikut tercetak ---------- */
@media print{
  .brandbar-wrap,.brandbar,.sidebar,.nav-backdrop,.topbar,.foot,.no-print{display:none !important}
}