/* ===================== TAMPILAN BARU (lebih hidup) =====================
   Dimuat setelah style.css dan menimpa gaya lamanya. Hapus <link> file ini untuk kembali ke tampilan asli. */
:root{--green:#047857;--green2:#10b981;--lime:#84cc16;--pale:#e6f9ef;--text:#123024;--muted:#64806f;--border:#d7ede0;--bg:#f2faf5;--surface:#ffffff;--surface2:#f7fcf9;--shadow:0 10px 30px #0a5c3a14;--grad:linear-gradient(135deg,#059669,#10b981 55%,#84cc16)}
:root[data-theme="dark"]{--green:#34d399;--green2:#6ee7b7;--pale:#123a2a;--text:#e3f5ea;--muted:#8fb3a0;--border:#1f3d30;--bg:#0b1712;--surface:#11231b;--surface2:#0f1f18;--shadow:0 10px 30px #00000055}
body{font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif;background:radial-gradient(circle at 100% 0,#bbf7d033,transparent 40%),radial-gradient(circle at 0 100%,#d9f99d33,transparent 40%),var(--bg);background-attachment:fixed;color:var(--text);transition:background-color .3s,color .3s}
svg.lucide{width:18px;height:18px;stroke-width:2.2;flex:0 0 auto}

/* Sidebar */
.sidebar{background:var(--surface);border-right:1px solid var(--border)}
.logo{background:var(--grad);box-shadow:0 8px 20px #10b98155;animation:goyang 4s ease-in-out infinite}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.sidebar .nav{color:var(--muted);transition:background .2s,color .2s,transform .2s}
.sidebar .nav:hover{transform:translateX(4px);background:var(--pale);color:var(--green)}
.sidebar .nav.active{background:var(--grad);color:#fff;box-shadow:0 8px 20px #10b98140}
.sidebar .nav-icon{filter:none;-webkit-filter:none}
.side-tip{display:flex;gap:10px;background:linear-gradient(135deg,#fef9c3,#dcfce7);color:#14532d;border-radius:14px;padding:12px;margin-bottom:14px;font-size:12px}
.side-tip svg{color:#ca8a04}.side-tip b{display:block}.side-tip small{display:block;margin-top:4px;line-height:1.5;color:#3f6212}
:root[data-theme="dark"] .side-tip{background:linear-gradient(135deg,#3f3a10,#123a2a);color:#ecfccb}
:root[data-theme="dark"] .side-tip small{color:#d9f99d}
.sidebar-logout{background:var(--surface);border-color:var(--border)}
.sidebar-logout:hover{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}

/* Topbar */
.topbar{border-bottom:0;position:sticky;top:0;z-index:4;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(10px)}
.page-heading{flex-direction:column;align-items:flex-start;gap:3px}
.page-heading small{color:var(--muted);font-size:12px}
.menu{background:var(--surface);border-color:var(--border);color:var(--text);align-items:center}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:transform .2s,background .2s}
.icon-btn:hover{transform:translateY(-2px);background:var(--pale);color:var(--green)}
.icon-btn em{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#ef4444;color:#fff;font:700 10px/19px 'Plus Jakarta Sans',sans-serif;animation:denyut 1.6s infinite}
.bell-wrap{position:relative}
.bell-menu{position:absolute;right:0;top:50px;width:290px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:14px;z-index:30;animation:muncul .2s ease}
.bell-menu b{display:block;margin-bottom:8px;font-size:13px}
.bell-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.bell-menu button,.bell-menu li.ok{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;color:var(--text);text-align:left;padding:9px;border-radius:10px;font-size:12px}
.bell-menu button:hover{background:var(--pale)}
.bell-menu button svg{color:#f59e0b}.bell-menu li.ok svg{color:var(--green2)}
.user .avatar{background:var(--grad);color:#fff;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;box-shadow:0 6px 16px #10b98150}
.user b{color:var(--text)}
.logout{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border-color:var(--border);padding:9px 11px;border-radius:12px}
.logout:hover{background:#fee2e2;color:#b91c1c}
.user .logout span{background:none;padding:0;border-radius:0;color:inherit}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#064e3b,#059669 55%,#65a30d);background-size:200% 200%;animation:geser 12s ease infinite;border-radius:24px;padding:32px;box-shadow:0 18px 40px #05966940}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;background:#ffffff14}
.hero::before{width:260px;height:260px;right:-60px;top:-90px}
.hero::after{width:160px;height:160px;right:180px;bottom:-90px}
.hero>*{position:relative}
.hero-emoji{font-size:90px;animation:melayang 3.5s ease-in-out infinite;filter:drop-shadow(0 12px 18px #0003);transition:opacity .35s,filter .35s}
.hero-emoji.ganti{opacity:0;filter:blur(6px)}
.quick{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.quick button{display:inline-flex;align-items:center;gap:7px;border:1px solid #ffffff40;background:#ffffff1f;color:#fff;padding:9px 14px;border-radius:999px;font-weight:600;font-size:12px;backdrop-filter:blur(6px);transition:background .2s,transform .2s}
.quick button:hover{background:#fff;color:#047857;transform:translateY(-2px)}

/* Kartu statistik */
.stats article,.panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.stats article{position:relative;overflow:hidden;padding:20px}
.stats article:hover,.panel:hover{transform:translateY(-4px);box-shadow:0 18px 40px #0a5c3a22}
.stats article>svg{width:44px;height:44px;padding:11px;border-radius:14px;color:#fff;background:var(--grad);margin-bottom:12px;box-shadow:0 8px 18px #10b98140}
.stats .c2>svg{background:linear-gradient(135deg,#65a30d,#a3e635)}
.stats .c3>svg{background:linear-gradient(135deg,#2563eb,#38bdf8)}
.stats .c4>svg{background:linear-gradient(135deg,#d97706,#facc15)}
.stats article::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:var(--pale);opacity:.6}
.stats article>*{position:relative;z-index:1}
.stats strong{font-size:26px;font-weight:800;color:var(--text)}
.stats small,.stats span{color:var(--muted)}

/* Panel, grafik, tabel, form */
.panel h3{font-size:16px;font-weight:700}
.chart-box{position:relative;height:250px}
.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);margin:0;font-size:12px}
th{background:var(--surface2);color:var(--muted)}
td{border-bottom-color:var(--border)}
tbody tr{transition:background .15s}tbody tr:hover{background:var(--pale)}
.flow div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;border:1px solid var(--border);border-radius:14px;padding:13px;background:var(--surface2)}
.flow div>svg{width:36px;height:36px;padding:8px;border-radius:11px;background:var(--grad);color:#fff}
.flow b{margin:0}.flow small{flex-basis:100%;margin:0 0 0 46px}
.flow>svg{justify-self:center;color:var(--green2);animation:melayang 2s ease-in-out infinite}
.notice{background:var(--surface2);border-color:var(--border);color:var(--muted)}
.form label{color:var(--muted)}
.form input,.form select,.login-card input,td select{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px}
td select{padding:7px}
.form input:focus,.form select:focus,.login-card input:focus{border-color:var(--green2);box-shadow:0 0 0 4px #10b98126}
.primary,.login-card .primary{background:var(--grad);border-radius:12px;box-shadow:0 8px 18px #10b98140;transition:transform .2s,box-shadow .2s,filter .2s}
.primary:hover{background:var(--grad);transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 24px #10b98155}
.secondary{display:inline-flex;align-items:center;gap:7px;border-radius:12px;background:var(--pale);color:var(--green)}
.intro-actions{display:flex;gap:8px;flex-wrap:wrap}
.tabs{background:var(--surface);border:1px solid var(--border);padding:5px;border-radius:14px;width:fit-content;max-width:100%;overflow-x:auto}
.tab{border-radius:10px;border-bottom:0;white-space:nowrap}
.tab.active{background:var(--grad);color:#fff}
.badge,.badge.done{background:#d1fae5;color:#047857}
.badge.warn{background:#fef3c7;color:#b45309}
.badge.info{background:#dbeafe;color:#1d4ed8}
.table-action{background:var(--surface);border-color:var(--border);border-radius:8px}
.table-action:hover{background:#fee2e2;color:#b91c1c}
.price{border-color:var(--border)}.price b{color:var(--green)}
#toast{background:var(--grad);border-radius:14px;box-shadow:0 12px 30px #05966955;font-weight:600}
footer{color:var(--muted)}
.page.active{animation:muncul .35s ease}

/* Banner di setiap halaman dalam; warna mengikuti modulnya */
.intro{--h1:#059669;--h2:#84cc16;position:relative;overflow:hidden;justify-content:flex-start;gap:16px;padding:22px 24px;border-radius:22px;color:#fff;background:linear-gradient(120deg,var(--h1),var(--h2));box-shadow:0 14px 30px color-mix(in srgb,var(--h1) 35%,transparent)}
.intro::after{content:"";position:absolute;right:-50px;top:-70px;width:200px;height:200px;border-radius:50%;background:#ffffff1a}
.intro>*{position:relative;z-index:1}
.intro h2{color:#fff}.intro p{color:#ffffffd9;margin:0}
.intro>div:not(.intro-actions){flex:1;min-width:0}
.intro-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;flex:0 0 56px;border-radius:16px;background:#ffffff2e;backdrop-filter:blur(6px);animation:melayang 4s ease-in-out infinite}
.intro-icon svg{width:28px;height:28px;color:#fff}
.intro .secondary{background:#ffffff2e;color:#fff;border:1px solid #ffffff55}.intro .secondary:hover{background:#fff;color:var(--h1)}
#production .intro{--h1:#16a34a;--h2:#65a30d}
#inventory .intro{--h1:#0d9488;--h2:#10b981}
#orders .intro{--h1:#2563eb;--h2:#06b6d4}
#distribution .intro{--h1:#7c3aed;--h2:#3b82f6}
#finance .intro{--h1:#d97706;--h2:#eab308}
#reports .intro{--h1:#0f766e;--h2:#4f46e5}

/* Judul panel berikon */
.panel h3{display:flex;align-items:center;gap:9px}
.panel h3>svg{width:30px;height:30px;padding:6px;border-radius:9px;background:var(--pale);color:var(--green)}

/* Ringkasan tahap distribusi */
.pipeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.tahap{--c:#10b981;display:flex;align-items:center;gap:12px;padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);position:relative;transition:transform .25s}
.tahap:hover{transform:translateY(-3px)}
.tahap>svg{width:42px;height:42px;padding:10px;border-radius:13px;color:#fff;background:var(--c)}
.tahap small{display:block;color:var(--muted);font-size:11px}.tahap strong{font-size:24px;font-weight:800}
.tahap.warn{--c:#f59e0b}.tahap.info{--c:#3b82f6}.tahap.ungu{--c:#8b5cf6}.tahap.done{--c:#10b981}
.tahap:not(:last-child)::after{content:"›";position:absolute;right:-11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:20px;z-index:1}
.stats.three article{min-height:0}

/* Tabel kosong lebih ramah */
td.empty::before{content:"🌿";display:block;font-size:28px;margin-bottom:6px;animation:melayang 3s ease-in-out infinite}

/* Login */
.login-screen{position:relative;overflow:hidden;background:linear-gradient(130deg,#ecfdf5,#d1fae5 40%,#ecfccb);background-size:200% 200%;animation:geser 14s ease infinite}
:root[data-theme="dark"] .login-screen{background:linear-gradient(130deg,#06281c,#0b1712 50%,#1a2e05)}
.login-brand,.login-card{position:relative;z-index:1}
.login-logo{background:var(--grad);box-shadow:0 18px 40px #10b98155;animation:melayang 4s ease-in-out infinite}
.login-brand h1{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.login-points{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:9px;text-align:left}
.login-points li{display:flex;align-items:center;gap:10px;background:#ffffffa6;border:1px solid #fff;padding:10px 13px;border-radius:12px;font-size:13px;font-weight:600;color:#065f46;backdrop-filter:blur(6px)}
:root[data-theme="dark"] .login-points li{background:#11231bcc;border-color:var(--border);color:var(--text)}
.login-points svg{color:#10b981}
.login-card{background:color-mix(in srgb,var(--surface) 85%,transparent);border:1px solid #ffffffaa;border-radius:26px;backdrop-filter:blur(14px);box-shadow:0 30px 60px #04785722}
.login-card h2,.login-card label{color:var(--text)}
.leaves span{position:absolute;bottom:-60px;font-size:30px;opacity:.55;animation:naik 14s linear infinite}
.leaves span:nth-child(1){left:6%}
.leaves span:nth-child(2){left:22%;animation-delay:3s;font-size:22px}
.leaves span:nth-child(3){left:45%;animation-delay:6s}
.leaves span:nth-child(4){left:64%;animation-delay:1.5s;font-size:24px}
.leaves span:nth-child(5){left:80%;animation-delay:8s}
.leaves span:nth-child(6){left:92%;animation-delay:4.5s;font-size:22px}

/* ===== Login neumorphism (kartu bulat timbul, kolom isian cekung) ===== */
:root{--neu:#e2ebe5;--neu-hi:#ffffff;--neu-lo:#b9c9bd}
:root[data-theme="dark"]{--neu:#1a2420;--neu-hi:#25322c;--neu-lo:#0d1310}
.login-screen,:root[data-theme="dark"] .login-screen{background:var(--neu);animation:none}
.login-points li,:root[data-theme="dark"] .login-points li{background:var(--neu);border:0;color:var(--text);box-shadow:5px 5px 12px var(--neu-lo),-5px -5px 12px var(--neu-hi);backdrop-filter:none}
.login-card.neu-card{position:relative;width:min(440px,94vw);border-radius:32px;display:grid;place-items:center;padding:40px 36px;background:var(--neu);border:0;backdrop-filter:none;box-shadow:18px 18px 40px var(--neu-lo),-18px -18px 40px var(--neu-hi)}
.leaves{pointer-events:none}
.neu-card .auth-form{display:grid;gap:11px;width:100%;max-width:330px;text-align:center}
.neu-card .auth-form:not([hidden]){animation:balik .6s ease}
@keyframes balik{from{opacity:0;transform:perspective(900px) rotateY(-80deg)}to{opacity:1;transform:none}}
.neu-card h2{font-size:30px;font-weight:800;margin:0;color:var(--text)}
.neu-card .auth-form>p{margin:-4px 0 6px;color:var(--muted);font-size:12.5px}
.neu-card label.neu-field{display:flex;align-items:center;gap:10px;margin:0;height:46px;padding:0 14px;border-radius:14px;background:var(--neu);color:var(--muted);box-shadow:inset 5px 5px 10px var(--neu-lo),inset -5px -5px 10px var(--neu-hi);transition:box-shadow .2s}
.neu-card label.neu-field:focus-within{box-shadow:inset 5px 5px 10px var(--neu-lo),inset -5px -5px 10px var(--neu-hi),0 0 0 2px var(--green2);color:var(--green)}
.neu-card .neu-field input{flex:1;min-width:0;width:auto;height:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--text);font-size:13.5px}
.neu-card .neu-field input:focus{box-shadow:none}
.eye{display:inline-flex;border:0;background:transparent;color:var(--muted);padding:4px;border-radius:8px}
.eye:hover{color:var(--green)}
.neu-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.neu-row .text-button{font-size:12px}
.neu-card label.neu-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;margin:0;font-weight:600;color:var(--muted)}
.neu-check input{position:absolute;opacity:0;width:1px;height:1px}
.neu-check span{width:18px;height:18px;border-radius:6px;background:var(--neu);box-shadow:inset 2px 2px 4px var(--neu-lo),inset -2px -2px 4px var(--neu-hi);display:grid;place-items:center}
.neu-check input:checked+span::after{content:"";width:10px;height:10px;border-radius:3px;background:var(--grad)}
.neu-check input:focus-visible+span{outline:2px solid var(--green2);outline-offset:2px}
.neu-btn{height:48px;border:0;border-radius:24px;margin-top:4px;background:var(--neu);color:var(--green);font-weight:800;font-size:14px;letter-spacing:.3px;box-shadow:7px 7px 14px var(--neu-lo),-7px -7px 14px var(--neu-hi);transition:box-shadow .15s,transform .15s,color .15s}
.neu-btn:hover{transform:translateY(-1px);color:var(--green2)}
.neu-btn:active{transform:none;box-shadow:inset 5px 5px 10px var(--neu-lo),inset -5px -5px 10px var(--neu-hi)}
.neu-btn:focus-visible,.text-button:focus-visible,.eye:focus-visible{outline:2px solid var(--green2);outline-offset:2px}
.kekuatan{height:6px;border-radius:3px;background:var(--neu);box-shadow:inset 2px 2px 4px var(--neu-lo),inset -2px -2px 4px var(--neu-hi);overflow:hidden}
.kekuatan span{display:block;height:100%;width:0;border-radius:3px;background:#ef4444;transition:width .3s,background .3s}
.kekuatan span[data-level="sedang"]{background:#f59e0b}.kekuatan span[data-level="kuat"]{background:#10b981}
.neu-card .login-error{margin:0;line-height:1.5}.neu-card .login-error:empty{display:none}
.neu-card .auth-switch{margin:0;font-size:12.5px}
@media(max-width:620px){.login-card.neu-card{border-radius:28px;padding:30px 22px}}

@keyframes geser{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes melayang{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes goyang{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
@keyframes denyut{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes muncul{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes naik{from{transform:translateY(0) rotate(0)}to{transform:translateY(-115vh) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:1100px){.charts{grid-template-columns:1fr}.pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}.tahap::after{display:none}}
@media(max-width:700px){.intro{flex-wrap:wrap;padding:18px}.intro>div:not(.intro-actions){flex:1 1 calc(100% - 62px)}.intro-actions{width:100%}.intro .secondary{max-width:none;flex:1;justify-content:center}.intro-icon{width:46px;height:46px;flex-basis:46px}.pipeline{gap:9px}.tahap{padding:12px;gap:9px}.tahap>svg{width:36px;height:36px;padding:8px}.tahap strong{font-size:20px}}
@media(max-width:700px){.menu{display:inline-flex}.page-heading small{display:none}.hero{padding:22px 18px}.hero-emoji{font-size:50px}.user .avatar,.user .logout{display:none}.page-heading{min-width:0}.page-heading h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.icon-btn{width:36px;height:36px}.bell-menu{position:fixed;left:12px;right:12px;top:70px;width:auto}.chart-box{height:220px}}
@media print{.sidebar,.topbar,.quick,footer,#toast,.intro-actions{display:none!important}main{margin:0;padding:0}.panel,.stats article{box-shadow:none;break-inside:avoid}}
/* Logo memakai ikon tunas putih (emoji 🌱 di Windows tampil dengan pot/tanah cokelat) */
.login-logo,.logo{display:inline-flex;align-items:center;justify-content:center;color:#fff}
.login-logo svg{width:52px;height:52px;stroke-width:2}
.logo svg{width:24px;height:24px}
@media(max-width:700px){.login-logo svg{width:38px;height:38px}}