/* =====================================================================
   ECMS - Enterprise Cooperative Management System
   Sistem desain: warna teal (identitas koperasi), tipografi sistem,
   mendukung mode terang & gelap.
   ===================================================================== */

:root {
  --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-200:#99f6e4; --teal-500:#14b8a6;
  --teal-600:#0d9488; --teal-700:#0f766e; --teal-800:#115e59; --teal-900:#134e4a;

  --bg: #f1f5f9;
  --bg-panel: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-hover: #f1f5f9;
  --border: #e2e8f0;
  --border-kuat: #cbd5e1;
  --teks: #0f172a;
  --teks-lembut: #475569;
  --teks-samar: #94a3b8;
  --brand: var(--teal-700);
  --brand-terang: var(--teal-600);

  --sukses:#059669; --sukses-bg:#ecfdf5;
  --peringatan:#d97706; --peringatan-bg:#fffbeb;
  --bahaya:#dc2626; --bahaya-bg:#fef2f2;
  --info:#2563eb; --info-bg:#eff6ff;

  --radius: 10px;
  --radius-sm: 7px;
  --bayang: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.1);
  --bayang-lg: 0 10px 25px -5px rgba(15,23,42,.18), 0 8px 10px -6px rgba(15,23,42,.1);
  --sidebar-w: 252px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    --bg:#0b1220; --bg-panel:#111a2b; --bg-subtle:#0f1728; --bg-hover:#1a2438;
    --border:#1e293b; --border-kuat:#334155;
    --teks:#e2e8f0; --teks-lembut:#94a3b8; --teks-samar:#64748b;
    --brand:#2dd4bf; --brand-terang:#5eead4;
    --sukses:#34d399; --sukses-bg:#052e23;
    --peringatan:#fbbf24; --peringatan-bg:#3a2a06;
    --bahaya:#f87171; --bahaya-bg:#3f1616;
    --info:#60a5fa; --info-bg:#0c2545;
    --bayang: 0 1px 3px rgba(0,0,0,.5);
    --bayang-lg: 0 10px 30px rgba(0,0,0,.6);
  }
}
:root[data-tema="gelap"] {
  --bg:#0b1220; --bg-panel:#111a2b; --bg-subtle:#0f1728; --bg-hover:#1a2438;
  --border:#1e293b; --border-kuat:#334155;
  --teks:#e2e8f0; --teks-lembut:#94a3b8; --teks-samar:#64748b;
  --brand:#2dd4bf; --brand-terang:#5eead4;
  --sukses:#34d399; --sukses-bg:#052e23;
  --peringatan:#fbbf24; --peringatan-bg:#3a2a06;
  --bahaya:#f87171; --bahaya-bg:#3f1616;
  --info:#60a5fa; --info-bg:#0c2545;
  --bayang: 0 1px 3px rgba(0,0,0,.5);
  --bayang-lg: 0 10px 30px rgba(0,0,0,.6);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--teks);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ------------------------------ Splash ------------------------------ */
.splash { display:grid; place-content:center; justify-items:center; gap:20px; height:100vh; }
.splash-logo { font-size:34px; font-weight:800; letter-spacing:.16em; color:var(--brand); }
.spinner {
  width:30px; height:30px; border:3px solid var(--border);
  border-top-color: var(--brand); border-radius:50%; animation: putar .7s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg); } }

/* ------------------------------ Masuk ------------------------------- */
.layar-masuk {
  min-height:100vh; display:grid; grid-template-columns: 1fr;
  place-items:center; padding:24px;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(13,148,136,.16), transparent 60%),
    radial-gradient(900px 480px at 100% 100%, rgba(20,184,166,.12), transparent 55%),
    var(--bg);
}
.kartu-masuk {
  width:100%; max-width:410px; background:var(--bg-panel); border:1px solid var(--border);
  border-radius:16px; box-shadow: var(--bayang-lg); padding:34px 30px;
}
.kartu-masuk .merek { text-align:center; margin-bottom:22px; }
.kartu-masuk .merek .logo {
  font-size:30px; font-weight:800; letter-spacing:.16em; color:var(--brand);
}
.kartu-masuk .merek .sub { color:var(--teks-lembut); font-size:13px; margin-top:6px; }
.kredensial {
  margin-top:20px; padding:12px 14px; background:var(--bg-subtle);
  border:1px dashed var(--border-kuat); border-radius:var(--radius-sm); font-size:12px;
  color:var(--teks-lembut);
}
.kredensial code { font-family:var(--mono); color:var(--teks); }

/* ------------------------------ Tata letak ------------------------------ */
.kerangka { display:grid; grid-template-columns: var(--sidebar-w) 1fr; min-height:100vh; }

.sidebar {
  background: var(--bg-panel); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sidebar-kepala { padding:16px 18px; border-bottom:1px solid var(--border); }
.sidebar-kepala .logo { font-size:19px; font-weight:800; letter-spacing:.14em; color:var(--brand); }
.sidebar-kepala .nama-koperasi {
  font-size:11.5px; color:var(--teks-lembut); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nav { flex:1; overflow-y:auto; padding:10px 10px 20px; }
.nav-grup { margin-top:14px; }
.nav-grup:first-child { margin-top:0; }
.nav-judul {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--teks-samar);
  padding:0 10px 6px; font-weight:700;
}
.nav a {
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm);
  color:var(--teks-lembut); font-size:13.5px; text-decoration:none; margin-bottom:1px;
}
.nav a:hover { background:var(--bg-hover); color:var(--teks); text-decoration:none; }
.nav a.aktif { background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand); font-weight:600; }
.nav a .ikon { width:17px; text-align:center; flex:none; font-size:14px; }
.nav a .lencana {
  margin-left:auto; background:var(--bahaya); color:#fff; font-size:10.5px; font-weight:700;
  border-radius:9px; padding:1px 6px; min-width:18px; text-align:center;
}
.sidebar-kaki { border-top:1px solid var(--border); padding:10px; }

.konten { display:flex; flex-direction:column; min-width:0; }
.topbar {
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  padding:11px 20px; background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  backdrop-filter: blur(9px); border-bottom:1px solid var(--border);
}
.topbar h1 { font-size:17px; }
.topbar .sub { font-size:12px; color:var(--teks-lembut); margin-top:2px; }
.topbar .kanan { margin-left:auto; display:flex; align-items:center; gap:8px; }
.tombol-menu { display:none; }

.halaman { padding:20px; flex:1; min-width:0; }

/* ------------------------------ Komponen ------------------------------ */
.panel {
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--bayang); margin-bottom:16px; overflow:hidden;
}
.panel-kepala {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:13px 16px; border-bottom:1px solid var(--border); background:var(--bg-subtle);
}
.panel-kepala h3 { font-size:14.5px; }
.panel-kepala .aksi { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.panel-isi { padding:16px; }
.panel-isi.rapat { padding:0; }

.grid { display:grid; gap:16px; }
.grid.k2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.k3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.k4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.k5 { grid-template-columns: repeat(5, minmax(0,1fr)); }

.kpi {
  background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 15px; box-shadow:var(--bayang); min-width:0;
}
.kpi .label {
  font-size:11.5px; color:var(--teks-lembut); text-transform:uppercase;
  letter-spacing:.05em; font-weight:600; display:flex; align-items:center; gap:6px;
}
.kpi .nilai {
  font-size:21px; font-weight:700; margin-top:7px; letter-spacing:-.02em;
  font-variant-numeric: tabular-nums; overflow-wrap:anywhere;
}
.kpi .catatan { font-size:11.5px; color:var(--teks-samar); margin-top:4px; }
.kpi.sukses .nilai { color:var(--sukses); }
.kpi.bahaya .nilai { color:var(--bahaya); }
.kpi.peringatan .nilai { color:var(--peringatan); }

/* Tabel */
.tabel-bungkus { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tabel { font-size:13px; min-width:100%; }
table.tabel th {
  text-align:left; padding:9px 12px; background:var(--bg-subtle); color:var(--teks-lembut);
  font-weight:650; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--border); white-space:nowrap; position:sticky; top:0;
}
table.tabel td { padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.tabel tbody tr:hover { background:var(--bg-hover); }
table.tabel tbody tr:last-child td { border-bottom:0; }
table.tabel .angka { text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }
table.tabel tfoot td {
  font-weight:700; background:var(--bg-subtle); border-top:2px solid var(--border-kuat);
  border-bottom:0;
}
table.tabel tr.klik { cursor:pointer; }
table.tabel .induk td { font-weight:700; background:var(--bg-subtle); }

/* Tombol */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:7.5px 13px; border-radius:var(--radius-sm); border:1px solid var(--border-kuat);
  background:var(--bg-panel); color:var(--teks); font-size:13px; font-weight:550;
  cursor:pointer; white-space:nowrap; transition:.13s;
}
.btn:hover:not(:disabled) { background:var(--bg-hover); border-color:var(--teks-samar); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.utama { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.utama:hover:not(:disabled) { background:var(--teal-800); border-color:var(--teal-800); }
:root[data-tema="gelap"] .btn.utama, :root:not([data-tema="terang"]) .btn.utama { color:#04211f; }
@media (prefers-color-scheme: light) { :root:not([data-tema="gelap"]) .btn.utama { color:#fff; } }
.btn.bahaya { background:var(--bahaya); border-color:var(--bahaya); color:#fff; }
.btn.sukses { background:var(--sukses); border-color:var(--sukses); color:#fff; }
.btn.kecil { padding:4.5px 9px; font-size:12px; }
.btn.polos { border-color:transparent; background:transparent; }
.btn.polos:hover:not(:disabled) { background:var(--bg-hover); }
.btn.blok { width:100%; }

/* Formulir */
.kolom { margin-bottom:13px; }
.kolom label { display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; color:var(--teks-lembut); }
.kolom label .wajib { color:var(--bahaya); }
.kolom .bantuan { font-size:11.5px; color:var(--teks-samar); margin-top:4px; }
input[type=text], input[type=number], input[type=password], input[type=date],
input[type=email], input[type=search], select, textarea {
  width:100%; padding:8px 11px; border:1px solid var(--border-kuat); border-radius:var(--radius-sm);
  background:var(--bg-panel); color:var(--teks); outline:none; transition:.13s;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
input[readonly], input:disabled, select:disabled { background:var(--bg-subtle); color:var(--teks-lembut); }
textarea { min-height:78px; resize:vertical; }
input.angka { text-align:right; font-variant-numeric: tabular-nums; }
.baris-form { display:grid; gap:13px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.baris-form.k3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.baris-form.k1 { grid-template-columns: 1fr; }

/* Lencana & status */
.lencana-status {
  display:inline-flex; align-items:center; gap:5px; padding:2.5px 9px; border-radius:20px;
  font-size:11.5px; font-weight:650; white-space:nowrap; border:1px solid transparent;
}
.st-sukses { background:var(--sukses-bg); color:var(--sukses); border-color:color-mix(in srgb,var(--sukses) 28%,transparent); }
.st-peringatan { background:var(--peringatan-bg); color:var(--peringatan); border-color:color-mix(in srgb,var(--peringatan) 28%,transparent); }
.st-bahaya { background:var(--bahaya-bg); color:var(--bahaya); border-color:color-mix(in srgb,var(--bahaya) 28%,transparent); }
.st-info { background:var(--info-bg); color:var(--info); border-color:color-mix(in srgb,var(--info) 28%,transparent); }
.st-netral { background:var(--bg-hover); color:var(--teks-lembut); border-color:var(--border); }

/* Pemberitahuan */
.notis {
  padding:11px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:14px;
  border:1px solid; display:flex; gap:9px; align-items:flex-start;
}
.notis.info { background:var(--info-bg); color:var(--info); border-color:color-mix(in srgb,var(--info) 26%,transparent); }
.notis.sukses { background:var(--sukses-bg); color:var(--sukses); border-color:color-mix(in srgb,var(--sukses) 26%,transparent); }
.notis.peringatan { background:var(--peringatan-bg); color:var(--peringatan); border-color:color-mix(in srgb,var(--peringatan) 26%,transparent); }
.notis.bahaya { background:var(--bahaya-bg); color:var(--bahaya); border-color:color-mix(in srgb,var(--bahaya) 26%,transparent); }
.notis .isi { min-width:0; }
.notis strong { display:block; margin-bottom:2px; }

/* Toast */
.toast-host { position:fixed; right:16px; bottom:16px; z-index:100; display:grid; gap:9px; max-width:min(400px, calc(100vw - 32px)); }
.toast {
  background:var(--bg-panel); border:1px solid var(--border); border-left:4px solid var(--info);
  border-radius:var(--radius-sm); box-shadow:var(--bayang-lg); padding:11px 14px; font-size:13px;
  animation: masuk .2s ease-out;
}
.toast.sukses { border-left-color:var(--sukses); }
.toast.bahaya { border-left-color:var(--bahaya); }
.toast.peringatan { border-left-color:var(--peringatan); }
.toast strong { display:block; margin-bottom:2px; }
.toast .detail { color:var(--teks-lembut); font-size:12px; margin-top:3px; }
@keyframes masuk { from { opacity:0; transform:translateY(8px); } }

/* Modal */
.modal-latar {
  position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px);
  z-index:90; display:flex; align-items:flex-start; justify-content:center;
  padding:24px 16px; overflow-y:auto;
}
.modal {
  background:var(--bg-panel); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--bayang-lg); width:100%; max-width:600px; margin:auto;
  animation: masuk .18s ease-out;
}
.modal.lebar { max-width:940px; }
.modal.sempit { max-width:430px; }
.modal-kepala {
  padding:15px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px;
}
.modal-kepala h3 { font-size:15.5px; }
.modal-isi { padding:18px; max-height:min(66vh, 640px); overflow-y:auto; }
.modal-kaki {
  padding:13px 18px; border-top:1px solid var(--border); display:flex; gap:8px;
  justify-content:flex-end; background:var(--bg-subtle); flex-wrap:wrap;
}

/* Tab */
.tab { display:flex; gap:3px; border-bottom:1px solid var(--border); overflow-x:auto; padding:0 4px; }
.tab button {
  padding:9px 14px; border:0; background:transparent; cursor:pointer; font-size:13.5px;
  color:var(--teks-lembut); border-bottom:2px solid transparent; white-space:nowrap; font-weight:550;
}
.tab button:hover { color:var(--teks); }
.tab button.aktif { color:var(--brand); border-bottom-color:var(--brand); font-weight:650; }

/* Alat & filter */
.alat { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.alat input[type=search], .alat input[type=text] { width:auto; min-width:210px; flex:1 1 210px; max-width:340px; }
.alat select, .alat input[type=date] { width:auto; }

/* Grafik */
.grafik { width:100%; height:auto; display:block; overflow:visible; }
.legenda { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--teks-lembut); margin-top:10px; }
.legenda span { display:inline-flex; align-items:center; gap:6px; }
.legenda i { width:11px; height:11px; border-radius:3px; display:inline-block; }

/* Bilah kemajuan */
.bilah { height:7px; background:var(--bg-hover); border-radius:5px; overflow:hidden; min-width:60px; }
.bilah > i { display:block; height:100%; background:var(--brand); border-radius:5px; }
.bilah.bahaya > i { background:var(--bahaya); }
.bilah.peringatan > i { background:var(--peringatan); }
.bilah.sukses > i { background:var(--sukses); }

/* Keadaan kosong & memuat */
.kosong { text-align:center; padding:44px 20px; color:var(--teks-samar); }
.kosong .ikon { font-size:36px; margin-bottom:10px; opacity:.55; }
.kosong .judul { font-weight:600; color:var(--teks-lembut); margin-bottom:4px; }
.memuat-baris { padding:34px; text-align:center; color:var(--teks-samar); }

/* Deskripsi berpasangan */
.deskripsi { display:grid; grid-template-columns: auto 1fr; gap:8px 16px; font-size:13px; }
.deskripsi dt { color:var(--teks-lembut); }
.deskripsi dd { margin:0; font-weight:550; }

.mono { font-family:var(--mono); font-size:12.5px; }
.samar { color:var(--teks-samar); }
.lembut { color:var(--teks-lembut); }
.kecil { font-size:12px; }
.tebal { font-weight:650; }
.kanan { text-align:right; }
.tengah { text-align:center; }
.nowrap { white-space:nowrap; }
.pos { color:var(--sukses); }
.neg { color:var(--bahaya); }
.mt0 { margin-top:0; } .mt8 { margin-top:8px; } .mt16 { margin-top:16px; }
.mb0 { margin-bottom:0; } .mb8 { margin-bottom:8px; } .mb16 { margin-bottom:16px; }
.gap8 { display:flex; gap:8px; flex-wrap:wrap; }
.antara { display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* Struk POS */
.struk { font-family:var(--mono); font-size:12px; line-height:1.6; }
.struk .garis { border-top:1px dashed var(--border-kuat); margin:8px 0; }
.struk .baris { display:flex; justify-content:space-between; gap:12px; }

/* Matriks risiko */
.matriks { display:grid; grid-template-columns: auto repeat(5, minmax(0,1fr)); gap:3px; font-size:11.5px; }
.matriks .sel {
  padding:8px 5px; border-radius:5px; text-align:center; min-height:56px;
  display:flex; flex-direction:column; justify-content:center; gap:2px; color:#0b1220; font-weight:600;
}
.m-rendah { background:#86efac; } .m-sedang { background:#fde047; }
.m-tinggi { background:#fdba74; } .m-ekstrem { background:#fca5a5; }
.matriks .tepi { display:flex; align-items:center; justify-content:center; color:var(--teks-lembut); font-weight:600; }

/* Cetak */
@media print {
  .sidebar, .topbar, .alat, .btn, .toast-host { display:none !important; }
  .kerangka { grid-template-columns: 1fr; }
  .panel { box-shadow:none; border:1px solid #ccc; break-inside: avoid; }
  body { background:#fff; }
  .halaman { padding:0; }
}

/* Responsif */
@media (max-width: 1200px) {
  .grid.k5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid.k4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .kerangka { grid-template-columns: 1fr; }
  .sidebar {
    position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-w); z-index:60;
    transform:translateX(-100%); transition:transform .22s; box-shadow:var(--bayang-lg); height:100dvh;
  }
  .sidebar.buka { transform:none; }
  .tombol-menu { display:inline-flex; }
  .tirai { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:55; }
  .grid.k3, .grid.k4, .grid.k5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.k2 { grid-template-columns: 1fr; }
  .baris-form, .baris-form.k3 { grid-template-columns: 1fr; }
  .halaman { padding:14px; }
}
@media (max-width: 560px) {
  .grid.k2, .grid.k3, .grid.k4, .grid.k5 { grid-template-columns: 1fr; }
  .topbar { padding:10px 14px; }
  .kpi .nilai { font-size:19px; }
}