/* ALK — gaya bersama, terinspirasi referensi dashboard (GoStock) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
    --biru: #1a73e8;
    --hijau: #1e9e5f;
    --merah: #e0334f;
    --kuning: #b8860b;
    --abu-teks: #6b7280;
    --abu-terang: #9ca3af;
    --border: #eef0f3;
    --bg-halaman: #f7f8fa;
    --bayangan: 0 2px 10px rgba(0,0,0,0.05);
}
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
    color: #16181d;
    line-height: 1.5;
    background: var(--bg-halaman);
}
h1 { font-size: 1.4rem; margin-bottom: 4px; font-weight: 700; }
h2 { font-size: 1rem; margin-top: 0; font-weight: 600; }
a { color: var(--biru); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Kartu -- unit visual utama, sudut membulat + bayangan halus, bukan garis tegas */
.panel, .card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 22px;
    margin-top: 16px;
    background: white;
    box-shadow: var(--bayangan);
}
.panel h2 { border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 14px; }

/* Angka besar ditonjolkan -- pola kartu ringkasan ala referensi */
.angka-besar { font-size: 1.8rem; font-weight: 700; }
.tren-naik { color: var(--hijau); }
.tren-turun { color: var(--merah); }

label { display: block; margin-top: 12px; font-weight: 600; font-size: 0.85rem; color: #374151; }
input, select, textarea {
    width: 100%; padding: 10px; margin-top: 4px; box-sizing: border-box;
    font-family: inherit; border: 1px solid var(--border); border-radius: 8px;
    background: #fbfbfc;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--biru); background: white; }

button, .btn {
    margin-top: 16px; padding: 10px 20px; background: #16181d; color: white;
    border: none; border-radius: 10px; cursor: pointer; font-size: 0.9rem; font-weight: 600;
}
button:hover, .btn:hover { opacity: 0.85; }

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table th, table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--border); }
table th { background: transparent; font-weight: 600; color: var(--abu-teks); font-size: 0.8rem; letter-spacing: 0.2px; }

.badge { padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; color: white; display: inline-block; font-weight: 600; }
.badge.ok { background: var(--hijau); }
.badge.warn { background: var(--kuning); }
.badge.danger { background: var(--merah); }
.badge.info { background: var(--biru); }

.hint { color: var(--abu-teks); font-size: 0.78rem; margin-top: 3px; }
.msg-sukses { background: #e6f7ef; color: var(--hijau); padding: 10px 14px; border-radius: 10px; margin-top: 10px; }
.msg-error { background: #fdeaec; color: var(--merah); padding: 10px 14px; border-radius: 10px; margin-top: 10px; }

.versi-tag { position: fixed; bottom: 10px; right: 14px; font-size: 0.68rem; color: var(--abu-terang); background: white; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); }

/* Tooltip definisi rasio -- dipakai di tabel perbandingan/tren */
.tip-rasio { position: relative; cursor: help; border-bottom: 1px dotted var(--abu-terang); }
.tip-rasio:hover::after {
    content: attr(data-tip);
    position: absolute; left: 0; top: 100%; z-index: 100;
    background: #16181d; color: white; padding: 8px 10px; border-radius: 8px;
    font-size: 0.76rem; width: 220px; white-space: normal; margin-top: 6px;
    box-shadow: var(--bayangan); text-align: left; font-weight: 400;
}

/* Nav atas bersama -- dipakai lewat nav_atas.php */
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-atas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; position: relative; }
.nav-atas a.nav-link { color: var(--abu-teks); font-weight: 600; font-size: 0.88rem; display: flex; align-items: center; gap: 6px; }
.profil-btn {
    display: flex; align-items: center; gap: 8px; background: white; border: 1px solid var(--border);
    border-radius: 999px; padding: 6px 12px 6px 6px; cursor: pointer; transition: box-shadow 0.2s ease;
}
.profil-btn:hover { box-shadow: var(--bayangan); }
.avatar {
    width: 26px; height: 26px; border-radius: 50%; background: var(--biru); color: white;
    display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
}
.profil-dropdown {
    position: absolute; right: 0; top: 44px; background: white; border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--bayangan); padding: 12px; min-width: 190px;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease; z-index: 50;
}
.profil-dropdown.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.profil-dropdown .siapa { font-size: 0.82rem; color: var(--abu-teks); margin-bottom: 8px; }
.profil-dropdown .versi-info { font-size: 0.72rem; color: var(--abu-terang); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.profil-dropdown a { display: flex; align-items: center; gap: 8px; color: #16181d; font-weight: 600; font-size: 0.88rem; }

/* Navigasi atas sederhana (belum sidebar penuh -- itu langkah berikutnya) */
.nav-atas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 0.88rem; color: var(--abu-teks); }
.nav-atas a { color: var(--abu-teks); font-weight: 600; }

/* ===== Layout sidebar -- CUMA berlaku untuk halaman yang sengaja
   dibungkus .app-layout, tidak mengganggu halaman lain yang masih
   pakai body biasa. ===== */
.app-layout { display: flex; min-height: 100vh; }
.sidebar {
    width: 230px; flex-shrink: 0; background: white; border-right: 1px solid var(--border);
    padding: 20px 14px; position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto;
    transition: transform 0.2s ease, width 0.2s ease;
}
.sidebar .logo { font-weight: 700; font-size: 1rem; padding: 0 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #16181d; }
.sidebar-menu { display: flex; flex-direction: column; gap: 2px; }
.sidebar-menu a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
    color: var(--abu-teks); font-size: 0.88rem; font-weight: 500; text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-menu a:hover { background: #f5f6f8; text-decoration: none; }
.sidebar-menu a.aktif { background: #eaf1fd; color: var(--biru); font-weight: 600; }
.sidebar-menu a svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sidebar-footer { position: absolute; bottom: 16px; left: 14px; right: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.main-content { margin-left: 230px; flex: 1; padding: 24px 28px; max-width: 1000px; transition: margin-left 0.2s ease; }

/* Toggle sembunyikan sidebar -- manual lewat tombol, BUKAN otomatis
   berdasar lebar layar. Default selalu tampil. */
.btn-toggle-sidebar {
    background: none; border: none; cursor: pointer; padding: 4px; color: var(--abu-teks);
    display: flex; align-items: center; border-radius: 6px;
}
.btn-toggle-sidebar:hover { background: #f5f6f8; }
.btn-toggle-sidebar svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
body.sidebar-tersembunyi .sidebar { transform: translateX(-230px); }
body.sidebar-tersembunyi .main-content { margin-left: 0; }
.btn-buka-sidebar {
    display: none; position: fixed; top: 16px; left: 16px; z-index: 50;
    background: white; border: 1px solid var(--border); border-radius: 8px; padding: 8px;
    cursor: pointer; box-shadow: var(--bayangan); color: var(--abu-teks);
}
.btn-buka-sidebar svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
body.sidebar-tersembunyi .btn-buka-sidebar { display: flex; }

/* Gaya ikon lebih mirip iOS: ujung garis membulat, bukan tajam.
   Berlaku ke semua ikon SVG di aplikasi supaya konsisten. */
svg { stroke-linecap: round; stroke-linejoin: round; }

/* =====================================================================
   GERAK (animasi) -- berlaku ke semua halaman ALK
   Satu kurva gerak untuk semuanya: cepat di awal, melambat halus.
   Pengguna yang mematikan animasi di perangkatnya otomatis tidak melihatnya.
   ===================================================================== */
:root { --ease: cubic-bezier(.2, .8, .2, 1); }

@keyframes alkNaik   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes alkMuncul { from { opacity: 0; } to { opacity: 1; } }
@keyframes alkMasuk  { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes alkDenyut { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* 1. Halaman masuk: isi naik pelan dan muncul bergantian. Sidebar tidak ikut bergerak
      supaya terasa tetap di tempat saat pindah menu. */
.main-content > *,
body > :where(h1, h2, .panel, .card, form, table, .nav-atas, .login-box) {
    animation: alkNaik .65s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 75ms + 60ms);
}
.main-content > #pp { animation: alkMuncul .35s ease backwards; animation-delay: 0s; }
.main-content > :nth-child(1){--i:0}
.main-content > :nth-child(2){--i:1}
.main-content > :nth-child(3){--i:2}
.main-content > :nth-child(4){--i:3}
.main-content > :nth-child(5){--i:4}
.main-content > :nth-child(6){--i:5}
.main-content > :nth-child(7){--i:6}
.main-content > :nth-child(8){--i:7}
.main-content > :nth-child(9){--i:7}
.main-content > :nth-child(10){--i:7}

/* 2. Halaman keluar: isi memudar sebentar sebelum pindah (dipicu skrip di sidebar.php) */
.main-content { transition: opacity .17s ease, transform .17s ease; }
body.alk-keluar .main-content { opacity: 0; transform: translateY(-8px); }

/* 3. Baris tabel muncul berurutan (12 baris pertama saja, sisanya langsung ada) */
.main-content table tbody tr { transition: background-color .15s ease; animation: alkNaik .4s var(--ease) backwards; animation-delay: calc(var(--i, 12) * 28ms + 120ms); }
.main-content table tbody tr:hover { background-color: #f8fafd; }
.main-content table tbody tr:nth-child(1){--i:0}
.main-content table tbody tr:nth-child(2){--i:1}
.main-content table tbody tr:nth-child(3){--i:2}
.main-content table tbody tr:nth-child(4){--i:3}
.main-content table tbody tr:nth-child(5){--i:4}
.main-content table tbody tr:nth-child(6){--i:5}
.main-content table tbody tr:nth-child(7){--i:6}
.main-content table tbody tr:nth-child(8){--i:7}
.main-content table tbody tr:nth-child(9){--i:8}
.main-content table tbody tr:nth-child(10){--i:9}
.main-content table tbody tr:nth-child(11){--i:10}
.main-content table tbody tr:nth-child(12){--i:11}
.main-content table tbody tr:nth-child(n+13) { animation: none; }

/* 4. Kartu dan panel: bayangan menebal halus saat disorot */
.card, .panel { transition: box-shadow .25s var(--ease), border-color .25s var(--ease); }
.card:hover { box-shadow: 0 8px 24px rgba(16, 24, 40, .09); border-color: #e3e7ee; }

/* 5. Tombol: terangkat tipis saat disorot, menekan saat diklik */
button, .btn { transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s ease, background-color .18s ease, color .18s ease; }
button:active, .btn:active { transform: scale(.97); }
.btn:hover, button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 24, 40, .14); opacity: 1; }
.btn:active, button[type="submit"]:active { transform: scale(.97); box-shadow: none; }

/* 6. Kolom isian: cincin biru muncul halus saat dipilih */
input, select, textarea { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(26, 115, 232, .13); }

/* 7. Pesan, lencana, dan tooltip */
.msg-sukses, .msg-error { animation: alkMasuk .4s var(--ease) backwards; }
.badge { transition: transform .18s var(--ease); }
.badge:hover { transform: scale(1.06); }
.tip-rasio:hover::after { animation: alkMasuk .18s var(--ease) backwards; }
.profil-dropdown { transform-origin: top right; }

/* 8. Kerangka abu berdenyut: pengganti tulisan "Memuat..." (beri class kerangka pada kotak kosong) */
.kerangka { background: linear-gradient(90deg, #eef0f3, #f6f7f9, #eef0f3); background-size: 200% 100%; border-radius: 8px; color: transparent; animation: alkDenyut 1.2s ease-in-out infinite; }

/* 9. Angka ringkasan: angka naik dari nol (dijalankan skrip di sidebar.php) */
.angka-besar { font-variant-numeric: tabular-nums; }


/* 10. Dashboard: kartu angka muncul membesar bergantian, batang sebaran tumbuh dari kiri */
@keyframes alkPop  { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes alkBar  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stat-card { animation: alkPop .6s var(--ease) backwards; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.stat-card:nth-child(1) { animation-delay: .12s; } .stat-card:nth-child(2) { animation-delay: .2s; } .stat-card:nth-child(3) { animation-delay: .28s; } .stat-card:nth-child(4) { animation-delay: .36s; }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16, 24, 40, .12); }
.bar-fill { transform-origin: left center; animation: alkBar .9s var(--ease) backwards; animation-delay: .35s; }
.bar-row { animation: alkNaik .5s var(--ease) backwards; }
.bar-row:nth-of-type(2) { animation-delay: .3s; } .bar-row:nth-of-type(3) { animation-delay: .36s; } .bar-row:nth-of-type(4) { animation-delay: .42s; } .bar-row:nth-of-type(5) { animation-delay: .48s; }
.stat-card .angka { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}