@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');:root{--bg:#f3f7f4;--ink:#19352b;--muted:#82938a;--green:#198754;--line:#e7eee9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}.layout{display:flex;min-height:100vh}.sidebar{width:240px;flex-shrink:0;background:#102d24;color:#d8e9df;padding:25px 16px;display:flex;flex-direction:column}.brand,.login-brand{display:flex;align-items:center;gap:11px;padding:0 8px 35px}.brandmark{width:42px;height:42px;border-radius:14px;background:#38a66b;color:#fff;display:grid;place-items:center;font-size:24px}.brand b,.login-brand b{font:800 20px Manrope;display:block}.brand small,.login-brand small{font-size:9px;letter-spacing:1.7px;color:#88b39b;display:block;margin-top:4px}.nav-label,.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:800;color:#91a79a}.nav-label{padding:0 12px 10px}.nav{display:flex;gap:13px;align-items:center;text-decoration:none;color:#a9c2b4;padding:13px;border-radius:11px;margin-bottom:5px;font-size:13px}.nav.active,.nav:hover{background:#214d39;color:white}.side-user{margin-top:auto;background:#1b4031;border-radius:13px;padding:11px;display:flex;gap:9px;align-items:center}.avatar{width:35px;height:35px;border-radius:11px;background:#d9f2e2;color:#147447;display:grid;place-items:center;font-weight:800;flex-shrink:0}.userinfo{min-width:0;flex:1}.userinfo b{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.userinfo small{font-size:10px;color:#9eb9aa}.logout-icon{border:0;background:transparent;color:#c7e1d1;font-size:21px;cursor:pointer}.main{width:calc(100% - 240px);max-width:1600px;margin:auto;padding:32px 35px 22px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.topbar h1{font:800 28px Manrope;letter-spacing:-.7px;margin:7px 0}.topbar p,.section-title p{font-size:12px;color:var(--muted);margin:0}.top-actions{display:flex;align-items:center;gap:12px}.online-pill{padding:10px 13px;background:white;border:1px solid var(--line);border-radius:25px;font-size:11px;font-weight:700;white-space:nowrap}.online-pill i{display:inline-block;width:7px;height:7px;background:#2cba6c;border-radius:50%;margin-right:6px}.profile-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:white;padding:6px 9px;font-size:11px;font-weight:700;cursor:pointer}.avatar.small{width:28px;height:28px;font-size:11px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat,.pot-card,.panel,.global-control{background:#fff;border:1px solid #eaf0eb;border-radius:17px;box-shadow:0 10px 30px #1c432f09}.stat{padding:18px;position:relative}.stat>span:first-child{font-size:12px;color:#75887d;font-weight:600}.stat strong{display:block;font:800 25px Manrope;margin:12px 0 3px}.stat small{font-size:10px;color:#99a69f}.staticon{position:absolute;right:17px;top:17px;background:#e4f5e9;color:#18834d;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:18px}.staticon.blue{background:#e4f3fc;color:#3188b8}.staticon.purple{background:#f1eaff;color:#8765cc}.staticon.orange{background:#fff0dd;color:#c17d25}.section-title{display:flex;align-items:end;justify-content:space-between;margin:30px 0 14px}.section-title h2,.panel h2{font:800 19px Manrope;margin:6px 0}.section-title p{margin-top:5px}.global-control{padding:18px 20px;display:flex;align-items:center;gap:20px;justify-content:space-between}.mode-copy{display:flex;gap:12px;align-items:center;min-width:210px}.mode-symbol{width:42px;height:42px;border-radius:13px;background:#e5f6e9;color:#198754;display:grid;place-items:center;font-size:22px}.mode-copy b{display:block;font-size:12px}.mode-copy small{display:block;color:#8a9a90;font-size:10px;margin-top:5px}.global-modes{display:flex;gap:7px;flex:1;max-width:480px}.global-mode{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 5px;border:1px solid #e6eee8;background:#fbfdfb;border-radius:11px;cursor:pointer;color:#77877d}.global-mode>span{font-size:16px}.global-mode b{font-size:11px}.global-mode small{font-size:9px}.global-mode.active{border-color:#6bc58e;background:#e9f8ed;color:#167a45;box-shadow:inset 0 0 0 1px #c6ebd1}.apply-btn,.primary-btn{border:0;background:#198754;color:white;border-radius:10px;padding:13px 15px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}.apply-btn:hover,.primary-btn:hover{background:#126c41}.last-update{font-size:10px;color:#84968b}.last-update b{color:#315c43}.pot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.pot-card{padding:19px}.pot-head,.pot-name,.moisture-row,.panel-title{display:flex;align-items:center;justify-content:space-between}.pot-name{justify-content:flex-start;gap:10px}.plant{width:40px;height:40px;border-radius:12px;background:#e8f6eb;display:grid;place-items:center;font-size:21px}.pot-name h3{font:800 14px Manrope;margin:0 0 4px}.pot-name small,.moisture-row small{font-size:10px;color:#92a097}.state{font-size:9px;font-weight:800;padding:7px 8px;border-radius:20px;background:#f0f3f1;color:#7c8b82;white-space:nowrap}.state.on{background:#dcf8e5;color:#158349}.moisture-row{margin:24px 0 12px}.moisture-row strong{font:800 28px Manrope;display:block;margin-top:7px}.moisture-row em{font-size:14px;color:#6b8b78;font-style:normal;margin-left:2px}.ring{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#31a96b calc(var(--val)*1%),#eaf2ec 0);position:relative}.ring:before{content:"";position:absolute;inset:6px;background:#fff;border-radius:50%}.ring span{position:relative;font-size:11px;font-weight:800}.bar{height:5px;background:#eaf1ec;border-radius:8px;overflow:hidden}.bar span{display:block;height:100%;background:#2ba567;border-radius:8px}.bar-label{display:flex;justify-content:space-between;color:#a1ada5;font-size:9px;margin-top:6px}.sensor-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:18px;padding-top:13px;font-size:10px;color:#8a9a90}.sensor-foot b{color:#688574;font-weight:600}.bottom-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:15px;margin-top:18px}.panel{padding:20px;min-width:0}.panel-title{align-items:center}.panel-symbol{width:32px;height:32px;border-radius:10px;background:#eef7f0;color:#228653;display:grid;place-items:center}.panel-desc{font-size:11px;color:#8a9a90;line-height:1.6;margin:12px 0 16px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.settings-grid label,.login-card label{font-size:10px;color:#718378;font-weight:700}.settings-grid input,.login-card input{display:block;width:100%;margin-top:7px;padding:11px;border:1px solid #e2ebe4;border-radius:9px;background:#fbfdfb;font:600 12px 'DM Sans';color:#244333;outline:none}.settings-grid input:focus,.login-card input:focus{border-color:#45ad73}.primary-btn{margin-top:16px}.form-msg{font-size:10px;color:#198754;margin-left:8px}.filters{display:grid;grid-template-columns:1.1fr 1fr 1fr auto auto;gap:6px;margin:16px 0 12px}.filters input,.filters select{min-width:0;width:100%;padding:9px 8px;border:1px solid #e4ece6;border-radius:8px;background:#fbfdfb;color:#5e7567;font:10px 'DM Sans'}.filter-btn,.reset-btn,.pagination button{border:1px solid #dfeae1;background:#f5faf6;color:#267348;border-radius:8px;padding:8px 9px;font-size:10px;font-weight:700;cursor:pointer}.reset-btn{color:#7d8d83;background:#fff}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:10px;text-align:left}th{font-size:9px;color:#8a9b90;letter-spacing:.5px;background:#f8fbf8}td,th{padding:11px 8px;border-bottom:1px solid #edf2ee;white-space:nowrap}td{color:#5f7568}td:last-child{white-space:normal;min-width:150px}.tag{padding:5px 7px;border-radius:6px;background:#eef4ef;font-size:9px;font-weight:800;color:#527461}.tag.mode{background:#e6f3fc;color:#337da5}.tag.login{background:#e4f6e9;color:#18834d}.tag.logout{background:#fff0e6;color:#b46b36}.pagination{display:flex;justify-content:space-between;align-items:center;padding-top:12px;color:#87978d;font-size:10px}.pagination div{display:flex;align-items:center;gap:8px}.pagination button:disabled{opacity:.4;cursor:default}footer{padding:22px 2px 0;color:#9aa79f;font-size:10px}footer span{margin:0 7px;color:#c5d2c9}footer b{color:#718d7b}.modal-backdrop{position:fixed;inset:0;background:#0b2119a8;display:none;align-items:center;justify-content:center;padding:20px;z-index:1000;backdrop-filter:blur(4px)}.modal-backdrop.show{display:flex}.modal{background:white;width:100%;max-width:360px;border-radius:20px;padding:28px;text-align:center;box-shadow:0 25px 80px #0003;animation:pop .18s ease-out}.modal-icon{width:52px;height:52px;margin:0 auto 15px;border-radius:17px;background:#fff0e9;color:#bf5c3b;display:grid;place-items:center;font-size:25px}.modal h3{font:800 19px Manrope;margin:0 0 8px}.modal p{font-size:12px;line-height:1.6;color:#839187;margin:0}.modal-actions{display:flex;gap:9px;margin-top:23px}.modal-actions button{width:100%;padding:12px;border-radius:10px;font-size:11px;font-weight:800;cursor:pointer}.modal-actions form{flex:1}.cancel-btn{background:#f2f6f3;color:#5b7164;border:1px solid #e5ece7}.danger-btn{background:#c84b3c;color:#fff;border:0}.toast{position:fixed;bottom:24px;right:24px;background:#153b2a;color:white;padding:13px 17px;border-radius:11px;font-size:12px;box-shadow:0 10px 30px #153b2a33;opacity:0;transform:translateY(10px);transition:.2s;z-index:1100;max-width:calc(100% - 48px)}.toast.show{opacity:1;transform:translateY(0)}@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at top left,#dff4e5,transparent 45%),#f2f7f3}.login-card{width:100%;max-width:420px;background:white;border:1px solid #e5eee7;border-radius:23px;padding:32px;box-shadow:0 25px 70px #193b2712}.login-brand{padding:0 0 31px}.login-card h1{font:800 27px Manrope;margin:8px 0}.login-desc{font-size:12px;color:#87968c;line-height:1.6;margin:0 0 24px}.login-card label{display:block;margin:16px 0}.login-card input{padding:13px;font-size:12px}.password-wrap{position:relative}.password-wrap input{padding-right:65px}.password-wrap button{position:absolute;right:8px;top:14px;border:0;background:transparent;color:#198754;font-size:10px;font-weight:800;cursor:pointer}.login-submit{width:100%;margin-top:7px;background:#198754;color:white;border:0;border-radius:10px;padding:14px;font-size:12px;font-weight:800;cursor:pointer}.login-note{margin-top:20px;padding:12px;background:#f2f8f3;border-radius:10px;font-size:10px;line-height:1.6;color:#718378}.error-box{padding:11px;background:#fff0ed;border:1px solid #f3d5cf;border-radius:9px;color:#b94331;font-size:11px}
@media(max-width:1200px){.main{padding:25px 20px}.global-control{flex-wrap:wrap}.mode-copy{flex:1}.global-modes{order:3;max-width:none;flex-basis:100%}.bottom-grid{grid-template-columns:1fr}.filters{grid-template-columns:1fr 1fr 1fr}.filter-btn,.reset-btn{padding:10px}}@media(max-width:850px){.sidebar{width:65px;padding:20px 8px}.brand{padding:0 2px 30px}.brand>div:last-child,.nav-label,.nav span,.userinfo{display:none}.brandmark{width:44px}.nav{justify-content:center;padding:14px 0;font-size:18px}.side-user{justify-content:center;padding:9px 0;flex-wrap:wrap}.logout-icon{width:100%}.main{width:calc(100% - 65px);padding:22px 14px}.stats{grid-template-columns:repeat(2,1fr)}.pot-grid{grid-template-columns:1fr}.pot-card{padding:18px}.topbar{align-items:flex-start}.topbar h1{font-size:22px}.topbar p{max-width:300px;line-height:1.5}.top-actions{gap:5px}.online-pill{font-size:10px;padding:7px 8px}.online-pill i{margin-right:5px}.profile-btn>span:not(.avatar),.profile-btn>b{display:none}.global-control{padding:15px}.mode-copy{min-width:0}.apply-btn{width:100%}.global-modes{order:0;flex-basis:100%}.filters{grid-template-columns:1fr 1fr}.filters input[type=search]{grid-column:span 2}}
html{scroll-behavior:smooth;scroll-padding-top:22px}.section-title,.panel,.global-control{scroll-margin-top:20px}

/* ===== GreenFlow — lapisan tampilan profesional ===== */
:root{--bg:#f3f6f4;--ink:#16302a;--muted:#6b7f75;--green:#1b8a5a;--green-d:#136b45;--water:#2f8fd0;--water-d:#1f6fa8;--dry:#d98a2b;--wet:#14a3a3;--line:#e2eae5}
body{background:var(--bg);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--water);outline-offset:2px}
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
button:disabled{cursor:not-allowed}

/* Sidebar */
.sidebar{position:sticky;top:0;height:100vh;align-self:flex-start;background:linear-gradient(180deg,#0f2b22,#0a1f18)}
.brandmark{background:linear-gradient(135deg,#34b878,#168a58);box-shadow:0 6px 16px #1fa86a40}.brandmark .ico{width:23px;height:23px}
.brand small,.login-brand small{letter-spacing:.4px;font-size:11px;color:#7fa892}
.nav-label{font-size:11px;letter-spacing:.4px;color:#7fa892;font-weight:600}
.nav{font-size:14px;font-weight:500;transition:background .15s,color .15s}.nav .ico{width:18px;height:18px;opacity:.9}
.nav.active{background:#1b4837;color:#fff;box-shadow:inset 3px 0 0 #4cd08d}
.userinfo b{font-size:12.5px}.userinfo small{font-size:11px}.logout-icon .ico{width:19px;height:19px}.logout-icon:hover{color:#fff}

/* Teks lebih terbaca */
.topbar p,.section-title p{font-size:13px}.topbar h1{font-size:28px}
.stat>span:first-child{font-size:13px}.stat small{font-size:11.5px}.staticon .ico{width:18px;height:18px}
.stat,.pot-card,.panel,.global-control{border-radius:16px;border:1px solid var(--line);box-shadow:0 1px 2px #12352a0d,0 8px 24px #12352a08}
.last-update,.pot-name small,.moisture-row small{font-size:12px}.panel-desc{font-size:12.5px}
.panel-symbol .ico,.mode-symbol .ico{width:19px;height:19px}.mode-symbol .ico{width:22px;height:22px}
.profile-btn .ico{width:15px;height:15px}.profile-btn{font-size:12.5px}

/* Status perangkat */
.online-pill{font-size:12px}.online-pill i{background:#b4c2ba;transition:background .3s}
.online-pill.online i{background:#2cba6c;box-shadow:0 0 0 4px #2cba6c26}.online-pill.offline i,.online-pill.err i{background:#e5604f;box-shadow:0 0 0 4px #e5604f26}

/* Kontrol mode */
.mode-copy b{font-size:14px}.mode-copy small{font-size:12px;line-height:1.4;max-width:260px}
.global-mode{padding:13px 8px;transition:background .15s,border-color .15s}.global-mode .ico{width:21px;height:21px}
.global-mode b{font-size:13px}.global-mode small{font-size:11px}
.global-mode:hover{border-color:#b9d9c6;background:#f3fbf5}
.global-mode.active{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 6px 16px #1b8a5a33}
.global-mode.active[data-mode=ManOn]{background:var(--water-d);border-color:var(--water-d);box-shadow:0 6px 16px #1f6fa833}
.global-mode.active[data-mode=ManOff]{background:#4d5f57;border-color:#4d5f57;box-shadow:0 6px 16px #4d5f5733}
.global-mode.active small{color:#ffffffc7}
.apply-btn,.primary-btn,.login-submit{background:var(--green);font-size:13px;padding:13px 20px;transition:background .15s}
.apply-btn:hover:not(:disabled),.primary-btn:hover,.login-submit:hover{background:var(--green-d)}
.apply-btn:disabled{background:#cdd9d2;color:#fff}

/* Kartu pot: tabung level air sebagai elemen utama */
.pot-card{position:relative;overflow:hidden;padding:20px 20px 18px 24px}
.pot-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#d3dfd8;transition:background .4s}
.pot-card.lvl-ok:before{background:var(--water)}.pot-card.lvl-dry:before{background:var(--dry)}.pot-card.lvl-wet:before{background:var(--wet)}
.plant{background:#e6f5ec;color:var(--green)}.plant .ico{width:22px;height:22px}
.pot-name h3{font-size:15px}
.state{font-size:11px;padding:6px 10px}
.state.on{background:#dcf0fd;color:var(--water-d)}.state.on:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--water);margin-right:6px;animation:pulse 1.4s ease-in-out infinite}
.state.na{background:#eef1ef;color:#93a199}
.moisture-row{margin:20px 0 6px;align-items:flex-end}.moisture-row strong{font-size:34px;line-height:1.05;margin-top:8px}
.soil{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;background:#eef2f0;color:#62756b}
.lvl-ok .soil{background:#e2f1fc;color:var(--water-d)}.lvl-dry .soil{background:#fdf0dc;color:#a2600c}.lvl-wet .soil{background:#dcf5f4;color:#0b7878}
.gauge{position:relative;width:48px;height:108px;flex:none;border-radius:14px 14px 18px 18px;background:#eef3f0;border:1.5px solid #cbd9d1;overflow:hidden}
.gauge .fill{position:absolute;left:0;right:0;bottom:0;height:calc(var(--val)*1%);background:linear-gradient(180deg,#63b6ee,var(--water));transition:height .8s cubic-bezier(.2,.8,.2,1)}
.lvl-dry .gauge .fill{background:linear-gradient(180deg,#f2bc6f,var(--dry))}.lvl-wet .gauge .fill{background:linear-gradient(180deg,#55cbcb,var(--wet))}
.gauge .mk{position:absolute;left:0;right:0;height:0;border-top:2px dashed #16302a8c;z-index:2}
.gauge .mk.start{bottom:calc(var(--start)*1%)}.gauge .mk.stop{bottom:calc(var(--stop)*1%)}
.pot-card.stale .gauge,.pot-card.stale .moisture-row strong{opacity:.55}
.sensor-foot{font-size:12px;margin-top:16px}.sensor-foot b{color:var(--ink);font-weight:700}

/* Form, tabel, tag */
.settings-grid label,.login-card label{font-size:12px}
.settings-grid input,.login-card input{font-size:14px;padding:12px;transition:border-color .15s,box-shadow .15s}
.settings-grid input:focus,.login-card input:focus{border-color:var(--green);box-shadow:0 0 0 3px #1b8a5a1f}
.form-msg{font-size:12px}
.filters input,.filters select{font-size:12px;padding:10px}
.filter-btn,.reset-btn,.pagination button{font-size:12px;padding:9px 12px;transition:background .15s}.filter-btn:hover,.pagination button:hover:not(:disabled){background:#e8f4ec}
table{font-size:12px}th{font-size:11px;letter-spacing:0;font-weight:700;color:#6f8379}td{padding:12px 8px}
tbody tr:hover td{background:#f8fbf9}td.empty{text-align:center;color:#8a9b90;padding:28px 8px;white-space:normal}
.tag{font-size:10.5px;padding:5px 8px}.tag.device{background:#ede9fb;color:#6247b8}.tag.setting{background:#fdf3d9;color:#8c6612}
.pagination{font-size:12px}footer{font-size:11.5px}

/* Modal & toast */
.modal-icon .ico{width:26px;height:26px}.modal-icon.info{background:#e3f2fc;color:var(--water-d)}
.modal p{font-size:13.5px}.modal-actions button{font-size:13px}
.ok-btn{background:var(--green);color:#fff;border:0}.ok-btn:hover:not(:disabled){background:var(--green-d)}.danger-btn:hover{background:#b03e30}
.toast{background:#12372a;border-left:4px solid #4cd08d;font-size:13px}.toast.err{border-left-color:#e5604f}

/* Login */
.login-card{border-radius:22px}.login-brand b{color:var(--ink)}.login-brand small{color:var(--muted)}
.login-desc{font-size:13.5px}.password-wrap button{font-size:12px}.login-note{font-size:12px}
.ok-box{padding:11px;background:#e9f7ee;border:1px solid #c9ead5;border-radius:9px;color:#17703f;font-size:12px;margin-bottom:6px}
.error-box{font-size:12.5px}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:850px){.nav .ico{width:21px;height:21px}.gauge{height:96px}.topbar h1{font-size:23px}}
@media(max-width:560px){.stats{grid-template-columns:1fr 1fr}.stat strong{font-size:22px}.settings-grid{grid-template-columns:1fr}.toast{left:14px;right:14px;bottom:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* Navigasi halaman: setiap menu sidebar menampilkan konten yang sesuai */
.page-view{display:none;animation:pageIn .22s ease-out;min-height:calc(100vh - 170px)}
.page-view.active{display:block}
.page-heading{margin-top:10px;margin-bottom:18px}
.single-panel{max-width:1100px}
.single-panel .panel{padding:26px}
#view-control .section-title{margin-top:10px}
#view-control .global-control{align-items:stretch;flex-direction:column;gap:22px;padding:26px;max-width:1000px}
#view-control .mode-copy{min-width:0}
#view-control .global-modes{max-width:none;width:100%;gap:12px}
#view-control .global-mode{min-height:110px;justify-content:center;gap:8px;padding:18px}
#view-control .global-mode b{font-size:14px}
#view-control .global-mode small{font-size:12px}
#view-control .apply-btn{align-self:flex-start;min-width:190px;padding:14px 22px}
#view-settings .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#view-settings .settings-grid label{font-size:13px}
#view-settings .settings-grid input{padding:14px;font-size:14px}
#view-settings .primary-btn{padding:14px 20px;font-size:13px}
#view-history .panel-title{margin-bottom:8px}
#view-history .filters{grid-template-columns:minmax(180px,1.4fr) minmax(150px,1fr) minmax(145px,.8fr) auto auto;gap:9px}
#view-history .table-wrap{margin-top:15px}
#view-history table{font-size:13px}
#view-history th{font-size:12px}
#view-history td{padding:15px 10px}
.nav{cursor:pointer}
@keyframes pageIn{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1200px){#view-history .filters{grid-template-columns:1fr 1fr 1fr}.single-panel{max-width:none}}
@media(max-width:850px){#view-control .global-modes{display:grid;grid-template-columns:1fr;order:0}#view-control .global-mode{min-height:82px}#view-control .apply-btn{width:100%}#view-history .filters{grid-template-columns:1fr 1fr}#view-history .filters input[type=search]{grid-column:span 2}#view-settings .settings-grid{grid-template-columns:1fr}.single-panel .panel{padding:18px}}

/* ===== Penyegaran visual GreenFlow: warna lebih tegas, isi kartu ringkas ===== */
:root{
 --bg:#edf4f2;--ink:#142f35;--muted:#71858a;--green:#087f5b;--green-d:#066548;
 --water:#169ac2;--water-d:#087ba3;--dry:#e59a35;--wet:#0d9f9a;--line:#dce8e5;
}
body{background:linear-gradient(135deg,#edf4f2 0%,#f4f7fb 54%,#eaf3f6 100%);color:var(--ink)}
.sidebar{background:linear-gradient(180deg,#102f3a 0%,#102a32 55%,#0b222a 100%);box-shadow:8px 0 30px #102f3a0c}
.brandmark{background:linear-gradient(135deg,#24c18a,#087f5b);box-shadow:0 8px 20px #24c18a38}
.nav{color:#b7cbd0;border-radius:12px}.nav.active{background:linear-gradient(100deg,#145344,#176b50);box-shadow:inset 3px 0 #5ce0b0;color:#fff}.nav:hover{background:#183f48;color:white}
.side-user{background:#173b43;border:1px solid #ffffff0d}.avatar{background:#d9f8ed;color:#087f5b}
.topbar{margin-bottom:27px}.topbar h1{color:#132f35;letter-spacing:-.9px}.topbar p,.section-title p{color:#73868a}
.online-pill,.profile-btn{background:#ffffffd9;border-color:#dce8e5;box-shadow:0 3px 12px #173a3a08}
.stat,.pot-card,.panel,.global-control{background:#fff;border-color:#dfe9e6;box-shadow:0 3px 7px #153c3d08,0 12px 28px #153c3d08}
.stat{padding:20px 20px 18px;border-radius:19px;min-height:118px}.stat>span:first-child{color:#61777d}.stat strong{color:#16353b;font-size:27px}.staticon{background:#ddf7ec;color:#087f5b;border-radius:12px}.staticon.blue{background:#def4fb;color:#087ba3}.staticon.purple{background:#e8eaff;color:#5c65bf}.staticon.orange{background:#fff0d9;color:#b76a12}
.section-title h2,.panel h2{color:#17363b}.section-title{margin-top:27px}.section-title h2{font-size:20px}
.pot-grid{gap:18px}.pot-card{border-radius:19px;padding:20px 20px 18px 23px;transition:transform .18s,box-shadow .18s}.pot-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px #153c3d0c,0 18px 35px #153c3d0c}
.plant{background:#def8ed;color:#087f5b;border-radius:13px}.pot-name h3{color:#17363b}.state{background:#eef3f3;color:#657b80}.state.on{background:#dff5ff;color:#087ba3}.state.on:before{background:#169ac2}
.moisture-row{margin:21px 0 5px}.moisture-row strong{color:#17363b;font-size:36px}.moisture-row>div>small{color:#829397;font-size:11px}.soil{margin-top:9px}.gauge{background:#e9f1f0;border-color:#d3e2df;border-radius:13px 13px 17px 17px}.gauge .fill{background:linear-gradient(180deg,#63d9b2,#159e8a)}.lvl-dry .gauge .fill{background:linear-gradient(180deg,#ffd27c,#e59a35)}.lvl-wet .gauge .fill{background:linear-gradient(180deg,#6adbd6,#0d9f9a)}
.global-control{border-radius:20px;padding:24px;background:linear-gradient(120deg,#fff 0%,#f7fcfa 100%)}.mode-symbol{background:#dff8ed;color:#087f5b}.global-mode{border-color:#dce8e5;background:#f8fbfb;color:#60777b;border-radius:13px}.global-mode:hover{background:#eef9f5;border-color:#9ddcc5}.global-mode.active{background:linear-gradient(135deg,#0c9b70,#08734f);border-color:#087f5b;box-shadow:0 7px 18px #087f5b26}.global-mode.active[data-mode=ManOn]{background:linear-gradient(135deg,#169fc5,#087ba3);border-color:#087ba3;box-shadow:0 7px 18px #087ba326}.global-mode.active[data-mode=ManOff]{background:linear-gradient(135deg,#52676d,#354c52);border-color:#354c52;box-shadow:0 7px 18px #354c5226}.apply-btn,.primary-btn,.login-submit{background:linear-gradient(135deg,#0c9b70,#08734f);box-shadow:0 5px 13px #087f5b20}.apply-btn:hover:not(:disabled),.primary-btn:hover,.login-submit:hover{background:linear-gradient(135deg,#087f5b,#055d40)}
.single-panel .panel{border-radius:20px;padding:25px}.panel-symbol{background:#e0f7ed;color:#087f5b}.settings-grid input,.login-card input{background:#f8fbfa;border-color:#dce8e5}.settings-grid input:focus,.login-card input:focus{border-color:#13a47a;box-shadow:0 0 0 3px #13a47a1c}
.filters input,.filters select{background:#fbfdfd;border-color:#dce8e5}.filter-btn{background:#087f5b;color:#fff;border-color:#087f5b}.filter-btn:hover{background:#066548}.reset-btn{background:#f4f8f7}.tag.login{background:#ddf7e9;color:#087f5b}.tag.mode{background:#def4fb;color:#087ba3}th{background:#f1f7f5}tbody tr:hover td{background:#f4faf8}
.toast{background:#123b3c;border-left-color:#4bd6a6}.modal{border:1px solid #e2ece9;box-shadow:0 25px 80px #0b2b2c2e}
/* Hilangkan keterangan sekunder yang membuat kartu terlalu ramai */
.stat small{display:none}
.pot-name small,.sensor-foot{display:none}
.mode-copy small,.global-mode small{display:none}
#control.section-title p,.page-heading p,.panel-desc{display:none}
#view-control .global-control{gap:18px;padding:28px;max-width:960px}
#view-control .global-modes{gap:12px}
#view-control .global-mode{min-height:100px;gap:9px}
#view-control .global-mode b{font-size:14px}
#view-settings .panel-title{margin-bottom:20px}
#view-history .panel-title{margin-bottom:18px}
footer{color:#809396}
@media(max-width:850px){.main{padding:25px 20px}.stats{gap:10px}.pot-grid{gap:12px}}
@media(max-width:560px){.main{padding:20px 14px}.stat{padding:15px;min-height:100px}.pot-card{padding:16px 14px 16px 18px}.moisture-row strong{font-size:30px}.single-panel .panel{padding:17px}}

/* ===== Tema GreenFlow Dark Emerald: tanpa card/latar putih ===== */
:root{
 --bg:#071a1b;--ink:#e2f4ee;--muted:#91b0a8;--line:#214442;
 --green:#21c58e;--green-d:#13a875;--water:#35b9dc;--water-d:#1598bd;
}
html{background:#071a1b;scroll-behavior:smooth}
body{background:radial-gradient(ellipse at 80% 0%,#123c37 0%,transparent 42%),linear-gradient(135deg,#071a1b 0%,#0a2426 52%,#0c2b2c 100%);color:#e2f4ee}
.main{color:#e2f4ee}
.topbar h1,.section-title h2,.panel h2,.pot-name h3,.stat strong{color:#e6f7f1}
.topbar p,.section-title p,.last-update,.panel-desc{color:#91b0a8}
.online-pill,.profile-btn{background:#123330;color:#cde9df;border-color:#28514b;box-shadow:none}
.stat,.pot-card,.panel,.global-control{background:linear-gradient(145deg,#123330,#102c2c);border:1px solid #28514b;box-shadow:0 12px 30px #020d0d35}
.stat>span:first-child{color:#9abdb2}.stat small{color:#7fa399}
.staticon{background:#174b3d;color:#5be0b0}.staticon.blue{background:#153f4c;color:#66d2ef}.staticon.purple{background:#302f50;color:#b9b6ff}.staticon.orange{background:#4a3925;color:#ffcb7a}
.pot-card:hover{box-shadow:0 15px 34px #020d0d50}
.plant,.mode-symbol,.panel-symbol{background:#17483b;color:#63e4b5}
.state{background:#203d3b;color:#a6c3ba}.state.on{background:#164b48;color:#65dfce}
.moisture-row strong{color:#e6f7f1}.moisture-row em,.moisture-row small{color:#91b0a8}
.gauge{background:#173b39;border-color:#28514b}.gauge .mk{border-color:#b1d8cc8c}
.global-control{background:linear-gradient(125deg,#123330,#102a2c)}
.global-mode{background:#0c2627;border-color:#28514b;color:#9dbab2}
.global-mode:hover{background:#17433b;border-color:#3a7968}
.global-mode.active{background:linear-gradient(135deg,#0e9b70,#08704f);color:#fff;border-color:#21c58e}
.global-mode.active[data-mode=ManOn]{background:linear-gradient(135deg,#169fc5,#087ba3);border-color:#35b9dc}
.global-mode.active[data-mode=ManOff]{background:linear-gradient(135deg,#52676d,#354c52);border-color:#647c80}
.settings-grid label,.login-card label{color:#a5c5ba}
.settings-grid input,.login-card input,.filters input,.filters select{background:#0a2425;color:#e2f4ee;border:1px solid #28514b;color-scheme:dark}
.settings-grid input::placeholder,.login-card input::placeholder,.filters input::placeholder{color:#688c82}
.settings-grid input:focus,.login-card input:focus{border-color:#21c58e;box-shadow:0 0 0 3px #21c58e20}
.filter-btn{background:#0d9a70;border-color:#0d9a70;color:#fff}.filter-btn:hover{background:#087b59}
.reset-btn,.pagination button{background:#153936;color:#b9d9ce;border-color:#28514b}
.filter-btn:hover,.pagination button:hover:not(:disabled){background:#1a4a40}
table{color:#cde6dd}th{background:#173b38;color:#a5c5ba}td,th{border-bottom-color:#234642}td{color:#bdd8ce}tbody tr:hover td{background:#173b38}td.empty{color:#91b0a8}
.tag{background:#23423d;color:#c0ded3}.tag.mode{background:#163f4c;color:#77d7f0}.tag.login{background:#174b39;color:#72e4ad}.tag.logout{background:#4b3029;color:#ffc0a1}.tag.device{background:#302f50;color:#c5c2ff}.tag.setting{background:#4a3925;color:#ffdb91}
.pagination,footer{color:#759b90}footer span{color:#41675e}footer b{color:#9ecbb9}
.side-user{background:#123330;border-color:#28514b}.avatar{background:#1a5142;color:#77edbe}.logout-icon{color:#b9d9ce}
.login-page{background:radial-gradient(ellipse at top left,#16483a,transparent 45%),linear-gradient(135deg,#071a1b,#0d3030)}
.login-card{background:linear-gradient(145deg,#123330,#0d2829);border:1px solid #28514b;box-shadow:0 25px 80px #020d0d70}
.login-brand b{color:#e2f4ee}.login-brand small{color:#91b0a8}.login-desc{color:#91b0a8}
.ok-box{background:#143d31;border-color:#23664b;color:#8ef0bd}.error-box{background:#482c2b;color:#ffc0b8;border-color:#71413b}
.modal{background:#123330;color:#e2f4ee;border:1px solid #28514b}.modal h3{color:#e6f7f1}.modal p{color:#a1c0b5}.cancel-btn{background:#1b403b;color:#cde6dd;border-color:#28514b}
.modal-icon{background:#4a3028;color:#ffb39a}.modal-icon.info{background:#153f4c;color:#75d9f3}
.toast{background:#123b38;color:#e2f4ee;border-left-color:#4bd6a6}
.bar{background:#23433e}.bar-label{color:#85a79c}.sensor-foot{border-color:#234642;color:#91b0a8}
@media(prefers-color-scheme:light){html,body{color-scheme:dark}}

/* Dashboard-only refinement: dark emerald, compact cards, sensor trend chart. Other menu pages retain their existing styles. */
body.dashboard-active{background:#071b16;color:#e1f4e9}
body.dashboard-active .main{background:#071b16}
body.dashboard-active .topbar h1{color:#e5f5eb}
body.dashboard-active .topbar p{color:#8da99a}
body.dashboard-active .profile-btn{background:#102d24;border-color:#244b3a;color:#d8eee1}
body.dashboard-active .profile-btn .avatar{background:#20543b;color:#bdf4d0}
.dashboard-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:2px 0 25px}
.dashboard-intro .eyebrow{color:#47d98b;font-size:9px;letter-spacing:1.8px}
.dashboard-intro h2{font:800 22px Manrope;margin:8px 0 5px;color:#e1f4e9}
.dashboard-intro p{font-size:11px;color:#8ba99a;margin:0}
.dash-updated{font-size:10px;color:#8ba99a;white-space:nowrap}
.dash-updated b{color:#53dc91;font-weight:700;margin-left:5px}
body.dashboard-active .section-title{margin:0 0 12px}
body.dashboard-active .section-title h2{font:800 15px Manrope;color:#d9f0e2;margin:0}
body.dashboard-active .pot-grid{gap:13px}
body.dashboard-active .pot-card,body.dashboard-active .sensor-chart{background:#10291f;border:1px solid #204734;border-radius:17px;box-shadow:0 10px 30px #00000012}
body.dashboard-active .pot-card{padding:17px}
body.dashboard-active .pot-name h3{color:#e2f5e9}
body.dashboard-active .pot-name small,body.dashboard-active .moisture-row small{color:#8ca99a}
body.dashboard-active .plant,body.dashboard-active .panel-symbol{background:#1b4632;color:#54dc91}
body.dashboard-active .state{background:#20392d;color:#a4bcae}
body.dashboard-active .state.on{background:#164e34;color:#6ce9a1}
body.dashboard-active .state.off{background:#24392e;color:#9db5a7}
body.dashboard-active .moisture-row strong{color:#e7f9ee}
body.dashboard-active .moisture-row em{color:#80b69a}
body.dashboard-active .ring{background:conic-gradient(#36d982 calc(var(--val)*1%),#234233 0)}
body.dashboard-active .ring:before{background:#10291f}
body.dashboard-active .bar{background:#234233}
body.dashboard-active .bar-label,body.dashboard-active .sensor-foot{color:#8ba99a}
body.dashboard-active .sensor-foot{border-color:#234535}
body.dashboard-active .sensor-foot b{color:#b0d8bf}
body.dashboard-active .gauge .fill{background:#36d982}
body.dashboard-active .gauge{background:#234233}
.sensor-chart{margin-top:16px;padding:18px 20px;position:relative;min-width:0}
.sensor-chart .panel-title h2{font:800 14px Manrope;margin:0;color:#e1f4e9}
.chart-subtitle{margin:5px 0 0;color:#8ca99a;font-size:10px}
.chart-legend{display:flex;gap:17px;flex-wrap:wrap;margin:17px 0 5px}
.chart-legend span{display:flex;align-items:center;gap:7px;color:#b4cdbd;font-size:10px}
.chart-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.legend-pot1{background:#36d982}.legend-pot2{background:#45b8ff}.legend-pot3{background:#f6c85f}
.chart-area{height:220px;position:relative;min-width:0}
#sensorChart{width:100%;height:220px;display:block}
.chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:#799887;font-size:11px;pointer-events:none}
.chart-foot{display:flex;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid #234535;color:#779687;font-size:9px}
@media(max-width:850px){.dashboard-intro{align-items:flex-start;flex-direction:column;gap:8px}.dashboard-intro h2{font-size:19px}body.dashboard-active .pot-grid{grid-template-columns:1fr}}

body.dashboard-active .gauge{background:#1b3b2c;border-color:#315c43}
body.dashboard-active .gauge .mk{border-color:#d0e8d980}
body.dashboard-active .lvl-dry .gauge .fill{background:linear-gradient(180deg,#f4c66c,#d58b42)}
body.dashboard-active .lvl-wet .gauge .fill{background:linear-gradient(180deg,#57d6cf,#239b8f)}


/* Monitoring suhu dan kelembapan udara — mengikuti tema Dark Emerald */
.environment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:0 0 24px}
.environment-card{display:flex;align-items:center;gap:15px;min-width:0;padding:17px 19px;border-radius:17px;background:linear-gradient(145deg,#12352b,#10291f);border:1px solid #28513d;box-shadow:0 10px 28px #00000018}
.environment-icon{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;font:800 17px Manrope;background:#1b4b36;color:#5ce5a0}
.humidity-card .environment-icon{background:#183f48;color:#64d7e8}
.environment-copy{display:flex;flex-direction:column;min-width:0;gap:4px}
.environment-copy>span{font-size:11px;color:#9ab9a8}
.environment-copy strong{font:800 27px/1.1 Manrope;color:#e5f7ec;letter-spacing:-.5px}
.environment-copy strong em{font:600 12px 'DM Sans',sans-serif;color:#8fb5a0;font-style:normal;margin-left:4px;letter-spacing:0}
.environment-copy small{font-size:9px;color:#719783}
@media(max-width:560px){.environment-grid{grid-template-columns:1fr;gap:10px;margin-bottom:20px}.environment-card{padding:15px}.environment-copy strong{font-size:25px}}

/* Riwayat sensor: tabel gelap konsisten dengan tema Dark Emerald */
#view-history .panel{background:#10291f;border:1px solid #204734;border-radius:17px;color:#e1f4e9}
#view-history .panel-title h2,#view-history .section-title h2{color:#e1f4e9}
#view-history .section-title p,#view-history .panel-desc{color:#8ca99a}
#view-history .filters input,#view-history .filters select{background:#0b2119;border:1px solid #28513d;color:#d7eee0}
#view-history .filters input::placeholder{color:#719783}
#view-history th{background:#17372a;color:#9ab9a8;border-bottom-color:#234535}
#view-history td{color:#c4dfcf;border-bottom-color:#234535}
#view-history .tag{background:#1b4632;color:#9be6b8}
#view-history .tag.mode{background:#183f48;color:#75d5e5}
#view-history .tag.device{background:#24392e;color:#b1c7ba}
#view-history .filter-btn,#view-history .reset-btn,#view-history .pagination button{background:#17372a;border-color:#28513d;color:#b8e5c8}
#view-history .pagination{color:#8ca99a}
#view-history .empty{color:#8ca99a}
@media(max-width:850px){#view-history table{min-width:760px}}


/* Jadwal pemberian nutrisi */
.nutrient-panel{margin-top:18px}
.nutrient-grid{margin-top:16px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid rgba(94,190,133,.22);border-radius:14px;background:rgba(31,73,55,.24);color:var(--text,#e6f4e9)}
.switch-row span{display:flex;flex-direction:column;gap:5px}.switch-row b{font-size:14px}.switch-row small,.nutrient-grid small{display:block;color:var(--muted,#9ab5a5);font-size:12px;line-height:1.5;margin-top:5px}
.switch-row input{width:20px;height:20px;accent-color:#36d982;flex:0 0 auto}
#nutrientForm .primary-btn{margin-top:18px}
/* Riwayat pemberian nutrisi mengikuti gaya tabel riwayat sensor */
#view-nutrient-history .filters{grid-template-columns:minmax(180px,1fr) minmax(170px,1fr) auto auto;gap:9px}
#view-nutrient-history .table-wrap{margin-top:15px}
#view-nutrient-history .filters input,#view-nutrient-history .filters select{background:#0b2119;border:1px solid #28513d;color:#d7eee0;color-scheme:dark}
#view-nutrient-history .filter-btn,#view-nutrient-history .reset-btn,#view-nutrient-history .pagination button{background:#17372a;border-color:#28513d;color:#b8e5c8}
#view-nutrient-history .pagination{color:#8ca99a}
@media(max-width:1200px){#view-nutrient-history .filters{grid-template-columns:1fr 1fr}}
@media(max-width:850px){#view-nutrient-history .filters{grid-template-columns:1fr 1fr}}