:root{--bg:#f4f6f9;--panel:#ffffff;--panel2:#f3f5f8;--text:#1f2733;--muted:#3a4350;--brand:#1f6feb;--brand2:#175fd0;--accent:#f59331;--err:#c93a3a;--border:#e6e9ef}
*{box-sizing:border-box}
body.dark{--bg:#0e131d;--panel:#161c28;--panel2:#1e2634;--text:#e5e9f0;--muted:#98a3b3;--border:#2a3342}
body.dark{background:var(--bg)}
html.booting #login{display:none!important}
html.predark body{background:#0e131d}
.topbar{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;background:var(--brand);color:#fff;padding:0 1.5rem;height:62px;box-shadow:0 2px 10px rgba(20,25,35,.12)}
.tb-logo{font-size:1.3rem;font-weight:800;color:#fff;letter-spacing:.4px}
.tb-caret{font-size:.9rem;margin-left:.05rem}
.tb-right{display:flex;align-items:center;gap:1.4rem}
.tb-item{position:relative;display:flex;align-items:center;gap:.4rem;cursor:pointer;color:#fff;font-weight:600;font-size:.9rem}
.tb-badge{position:absolute;top:-7px;right:-9px;background:#ef4444;color:#fff;font-size:.6rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.tb-drop{position:absolute;top:150%;right:0;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.22);min-width:190px;overflow:hidden;z-index:60;font-weight:400}
.tb-drop a{display:block;padding:.6rem .9rem;cursor:pointer;font-size:.88rem;color:var(--text)}
.tb-drop a:hover{background:var(--panel2)}
.tb-switch{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto}
.tb-switch input{opacity:0;width:0;height:0}
.tb-sl{position:absolute;inset:0;background:rgba(255,255,255,.35);border-radius:24px;transition:.2s;cursor:pointer}
.tb-sl::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.tb-switch input:checked + .tb-sl{background:#0b1220}
.tb-switch input:checked + .tb-sl::before{transform:translateX(20px)}
.order-notif{background:#daeefb;color:#1a6ba8;text-align:center;padding:.75rem;border-radius:8px;cursor:pointer;margin:0 0 -.4rem;border:1px solid #b9dcf2;font-size:.92rem}
#bellList{max-height:320px;overflow-y:auto}
.order-notif:hover{background:#cfe7f8}
.mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem .8rem}
.mp-chk{display:flex;align-items:center;gap:.4rem;font-size:.83rem;color:var(--text);cursor:pointer;font-weight:400}
.mp-chk input{width:auto;margin:0}
@media(max-width:600px){.mp-grid{grid-template-columns:repeat(2,1fr)}}
.isl-opt{display:flex;align-items:center;gap:.5rem;padding:.32rem .6rem;font-size:.82rem;cursor:pointer;white-space:nowrap;color:var(--text)}
.isl-opt:hover{background:var(--panel2)}
.isl-opt input{cursor:pointer;width:auto;margin:0}
.fm-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:1.05rem;color:var(--text);padding-bottom:.6rem;margin-bottom:.9rem;border-bottom:1px solid var(--border)}
.fm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.fm-grid > label,.fm-islands-wrap{display:flex;flex-direction:column;gap:.35rem;font-size:.8rem;font-weight:600;color:var(--muted)}
.fm-grid select{width:100%;padding:.5rem .6rem;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text);font-weight:400;font-size:.85rem}
.fm-islands-wrap{grid-column:1/-1}
.fm-islands{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem .9rem;font-weight:400;color:var(--text);font-size:.82rem;margin-top:.2rem}
.fm-islands label{display:flex;align-items:center;gap:.45rem;cursor:pointer}
.fm-islands input{width:auto;margin:0;cursor:pointer}
.fm-foot{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.3rem}
.btn-light.has-filter{border-color:var(--brand);color:var(--brand);font-weight:600}
.track-div{height:1px;background:var(--border);margin:.9rem 0}
.track-timeline{margin-top:.6rem;display:flex;flex-direction:column}
.tl-item{position:relative;display:flex;gap:.65rem;padding:0 0 .85rem .1rem}
.tl-item:before{content:"";position:absolute;left:5px;top:14px;bottom:-2px;width:2px;background:var(--border)}
.tl-item:last-child:before{display:none}
.tl-dot{width:12px;height:12px;border-radius:50%;background:var(--border);flex:0 0 12px;margin-top:2px;z-index:1}
.tl-item.tl-active .tl-dot{background:var(--brand)}
.tl-body{font-size:.85rem;color:var(--text)}
.tl-item.tl-active .tl-text{font-weight:600}
.tl-time{font-size:.75rem;color:var(--muted);margin-top:.12rem}
.switch,.grid label.switch,.modal-box label.switch{display:inline-flex !important;flex-direction:row !important;align-items:center;gap:.55rem;cursor:pointer;font-weight:700;color:var(--text);user-select:none;flex:0 0 auto}
.switch input{display:none}
.switch .slider{position:relative;width:56px;height:28px;background:#e23b3b;border-radius:999px;transition:.2s;flex:0 0 56px}
.switch .slider:before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch .slider:after{content:"OFF";position:absolute;top:8px;right:8px;font-size:.62rem;font-weight:800;color:#fff;letter-spacing:.03em}
.switch input:checked + .slider{background:var(--brand)}
.switch input:checked + .slider:before{transform:translateX(28px)}
.switch input:checked + .slider:after{content:"ON";left:9px;right:auto;color:#fff}
.ef-list{display:flex;flex-direction:column;gap:.5rem}
.ef-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.7rem 1rem}
.ef-name{font-weight:600;color:var(--brand);cursor:pointer}
.ef-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.fb-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
.fb-track-tabs{display:flex;gap:.3rem;margin:.3rem 0}
.fbtab{flex:1;padding:.5rem;border:1px solid var(--border);background:var(--panel);color:var(--muted);border-radius:8px;cursor:pointer;font-weight:600;font-size:.82rem}
.fbtab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.fb-track-pane{display:flex;flex-direction:column;gap:.6rem}
.fb-sub{margin:.5rem 0 0;font-size:.85rem;color:var(--text)}
.fb-left{display:flex;flex-direction:column;gap:.6rem}
.fb-left h3{margin:.6rem 0 .1rem;border-top:1px solid var(--border);padding-top:.6rem}
.fb-left label{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;color:var(--muted)}
.fb-left input,.fb-left select{padding:.45rem .6rem;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text);font-size:.85rem}
.fb-left input[type=color]{padding:.15rem;height:34px}
.fb-left .fb-ro input{background:var(--panel2);font-weight:600;color:var(--text)}
.fb-section{border:1px solid var(--border);border-radius:8px;padding:.6rem;display:flex;flex-direction:column;gap:.4rem;background:var(--panel2)}
.fb-right{background:var(--panel2);border-radius:12px;padding:1.2rem;display:flex;flex-direction:column;gap:1rem;align-items:center;position:sticky;top:1rem}
.fb-preview{display:flex;flex-direction:column;gap:1.6rem;align-items:center;width:100%}
.fb-pv-block{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.fb-pv-cap{font-size:.75rem;color:var(--muted);font-weight:600}
.fb-pv-desktop{width:520px;max-width:100%}
.fb-pv-mobile{width:360px;max-width:100%}
.sw-row{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-top:.25rem}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:0 0 0 1px var(--border)}
.sw.on{border-color:#fff;box-shadow:0 0 0 2px #1f6feb}
.sw-rainbow{background:conic-gradient(red,orange,gold,lime,aqua,blue,magenta,red)}
.fb-cf-lbl{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.15rem}
.rekap{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:1rem 1.2rem;margin-bottom:1.1rem;max-width:640px}
.rekap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.15rem .9rem}
.rekap-grid>div{display:flex;justify-content:space-between;gap:.6rem;border-bottom:1px dashed var(--border);padding:.32rem 0}
.rekap-grid span{color:var(--muted)}
.rekap-grid b{white-space:nowrap}
.rekap-top{margin-top:.8rem}
.rekap-top>b{display:block;margin-bottom:.25rem}
.rekap-top>div{color:var(--text);font-size:.9rem;padding:.1rem 0}
.rk-prod{padding:.6rem 0;border-bottom:1px solid var(--border)}
.rk-pname{font-weight:700;margin-bottom:.35rem}
.rk-total{margin-top:.9rem;border-top:2px solid var(--border);padding-top:.7rem}
.rk-total>b{display:block}
.pv-lab{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;color:var(--muted)}
.fu-card{border:1px solid var(--border);border-radius:12px;padding:.2rem 1rem;display:flex;flex-direction:column}
.fu-row{display:flex;align-items:center;gap:.7rem;padding:.75rem 0;border-bottom:1px solid var(--border)}
.fu-row:last-of-type{border-bottom:none}
.fu-del{margin:.7rem 0;color:#c93a3a;border-color:#eab8b8}
.fu-tpl{border:1px solid var(--border);border-radius:12px;padding:1rem;margin-top:1rem;max-width:820px}
.wa-fu{background:none;border:none;cursor:pointer;padding:.15rem;line-height:0;color:#c2c8d0}
.wa-fu:hover{color:#9aa3b0}
.wa-fu.on{color:#25d366}
.wa-fu.on:hover{color:#1fb457}
.fu-ava{width:40px;height:40px;border-radius:50%;background:var(--panel2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text);flex:0 0 auto}
.sc-panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:.7rem .8rem}
.sc-title{font-weight:600;font-size:.95rem;margin-bottom:.5rem;color:var(--text)}
.sc-row{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;border-bottom:1px solid var(--border)}
.sc-badge{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:.72rem;flex:0 0 auto}
.sc-logo{width:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.sc-logo-img{max-width:40px;max-height:22px;object-fit:contain}
.sc-logo-chip{font-weight:500;font-size:.75rem;white-space:nowrap}
.sc-name{flex:1;font-size:.85rem;color:var(--text);font-weight:400}
.sc-num{padding:.28rem .75rem;border-radius:20px;font-weight:500;font-size:.8rem;white-space:nowrap}
.sc-avg{display:flex;gap:.6rem;margin-top:.7rem}
.sc-avg-card{flex:1;display:flex;justify-content:space-between;align-items:center;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:.5rem .7rem;font-size:.8rem;gap:.5rem;color:var(--text)}
.sc-A,.sc-num-A{background:#cdeff2;color:#12707c}
.sc-B,.sc-num-B{background:#c9ecd6;color:#1a8a4e}
.sc-C,.sc-num-C{background:#ffe3b0;color:#b45309}
.sc-D,.sc-num-D{background:#ffd9c2;color:#c2410c}
.sc-E,.sc-num-E{background:#ffd6de;color:#c0264a}
.sc-none,.sc-num-none{background:#e2e6ea;color:#8a94a3}
.ap-modes{display:flex;gap:.4rem;flex-wrap:wrap}
.ap-mbtn{background:var(--panel);border:1px solid var(--border);color:var(--text);padding:.4rem .9rem;border-radius:8px;cursor:pointer;font-weight:600;font-size:.85rem}
.ap-mbtn.active{background:#1f6feb;color:#fff;border-color:#1f6feb}
.ap-table th,.ap-table td{font-size:.78rem;white-space:nowrap;text-align:right;padding:.4rem .55rem}
.ap-table thead th{background:#2f5fbf;color:#fff;font-weight:600;border-color:rgba(255,255,255,.15)}
.ap-table thead th:nth-child(n+7):nth-child(-n+13){background:#2e7d5b}
.ap-table th:first-child,.ap-table td:first-child{text-align:center;position:sticky;left:0;background:var(--panel)}
.ap-table thead th:first-child{background:#374151;color:#fff}
.ap-table td:nth-child(n+2):nth-child(-n+6){background:rgba(31,111,235,.06)}
.ap-table td:nth-child(n+7):nth-child(-n+9){background:rgba(34,160,107,.11)}
.ap-table td:nth-child(n+10):nth-child(-n+13){background:rgba(34,160,107,.05)}
.ap-table td:nth-child(n+14):nth-child(-n+17){background:rgba(31,111,235,.09)}
.ap-table tbody tr:hover td{background:rgba(31,111,235,.14)}
.ap-table tr.ap-total td{font-weight:700;background:var(--panel2)!important;border-top:2px solid var(--border)}
.ap-pos{color:#1a8a4e;font-weight:700}
.ap-neg{color:#c0264a;font-weight:700}
.sc-mini{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;border-radius:11px;padding:0 .45rem;font-size:.72rem;font-weight:500;cursor:default}
#scTip{position:fixed;z-index:9999;width:300px;max-width:92vw;display:none}
#scTip .sc-panel{margin:0;box-shadow:0 10px 34px rgba(20,25,35,.22)}
.sc-dbg{cursor:pointer;color:var(--muted);font-size:.72rem;margin-top:.5rem}
#scRawPre{white-space:pre-wrap;word-break:break-all;font-size:.7rem;max-height:220px;overflow:auto;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:.5rem;margin-top:.3rem}
.fb-save-row{display:flex;justify-content:flex-end;margin-top:.9rem}
.fb-sec-head{display:flex;align-items:center;justify-content:space-between}
.fb-move{display:flex;gap:.3rem}
.fb-move button{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:7px;width:32px;height:30px;cursor:pointer;font-size:1rem;font-weight:900;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.fb-move button:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.ff-card{background:#fff;border:1px solid #e6e9ef;border-radius:14px;padding:1.2rem;box-shadow:0 6px 20px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:.7rem}
.ff-title{font-weight:700;font-size:1.05rem;color:#1f2733;text-align:center;margin-bottom:.2rem}
.ff-field{display:flex;flex-direction:column;gap:.3rem}
.ff-field label{font-size:.85rem;color:#2f3742;font-weight:700}
.ff-field input{padding:.7rem .8rem;border:2px solid #9aa3b0;border-radius:9px;font-size:.92rem;background:#fff;color:#1f2733}
.ff-field input::placeholder{color:#4a5462;opacity:1}
.ff-btn{margin-top:.3rem;border:none;border-radius:10px;padding:.7rem 1rem;font-weight:700;font-size:.95rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
@media(max-width:900px){.fb-grid{grid-template-columns:1fr}}
.mgdel{background:none;border:none;color:var(--err);cursor:pointer;padding:.25rem;border-radius:6px;display:inline-flex}
.mgdel:hover{background:var(--panel2)}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}
.hidden{display:none!important}
.muted{color:var(--muted);font-size:.9rem;margin-top:0}
.err{color:var(--err)}
.ok{color:#1a8a4e;margin-left:.5rem}

/* Login */
.login{display:flex;align-items:center;justify-content:center;height:100vh}
.card{background:var(--panel);padding:2rem;border-radius:14px;width:320px;text-align:center;border:1px solid var(--border)}
.card h1{margin:0 0 .25rem;color:var(--brand)}
.card input{width:100%;margin:.75rem 0;padding:.7rem;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:var(--text)}

/* App layout */
.app{display:flex;flex-direction:column;min-height:100vh}
.app-body{display:flex;flex:1;min-height:0}
.sidebar{width:230px;background:var(--panel);padding:1.2rem;display:flex;flex-direction:column;border-right:1px solid var(--border)}
.sidebar h2{color:var(--brand);margin:.2rem 0 1.2rem}
.sidebar nav{display:flex;flex-direction:column;gap:.25rem;flex:1}
.sidebar nav a{padding:.65rem .8rem;border-radius:8px;cursor:pointer;color:var(--muted);font-size:.95rem}
.sidebar nav a:hover{background:var(--panel2);color:var(--text)}
.sidebar nav a{display:flex;align-items:center;gap:.6rem}
.sidebar nav a.active{background:var(--brand2);color:#fff}
.sidebar nav a svg{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.sidebar nav a.active svg{opacity:1}
.logout{margin-top:1rem;background:transparent;border:1px solid var(--border);color:var(--muted)}
.content{flex:1;padding:2rem;width:100%;min-width:0}
h1{margin-top:0}

/* Forms */
button{background:var(--brand);color:#fff;border:none;padding:.65rem 1.1rem;border-radius:8px;font-weight:600;cursor:pointer}
button:hover{background:var(--brand2)}
input,textarea,select{background:#fff;border:1px solid var(--border);color:var(--text);padding:.6rem;border-radius:8px;font-family:inherit}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem}
.grid label,.tab>label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:var(--muted)}
.grid .full{grid-column:1/-1}
.full{width:100%}
.row{display:flex;gap:.5rem;margin:.8rem 0;flex-wrap:wrap}
.row input{flex:1;min-width:120px}

/* Tables */
table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.9rem}
th,td{text-align:left;padding:.6rem;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-weight:600}
td button{padding:.35rem .7rem;font-size:.8rem}

/* Chat */
.chatbox{background:var(--panel);border:1px solid var(--border);border-radius:12px;height:50vh;overflow-y:auto;padding:1rem;margin:1rem 0;display:flex;flex-direction:column;gap:.6rem}
.bubble{max-width:75%;padding:.6rem .8rem;border-radius:12px;white-space:pre-wrap;font-size:.92rem}
.bubble.user{align-self:flex-end;background:var(--brand2);color:#fff;border-bottom-right-radius:3px}
.bubble.assistant{align-self:flex-start;background:var(--panel2);border-bottom-left-radius:3px}
.statusbox{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0}
.statusbox .item{background:var(--panel);border:1px solid var(--border);padding:.8rem;border-radius:10px}
.statusbox .on{color:#1a8a4e} .statusbox .off{color:var(--err)}
code{background:var(--panel2);padding:.3rem .5rem;border-radius:6px;display:inline-block;word-break:break-all}
/* Nav label */
.navlabel{color:#434c58;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;margin:.7rem 0 .2rem;padding-left:.3rem}
.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.ghost:hover{background:var(--panel2)}
.small{font-size:.78rem}

/* Cards */
.cards{display:flex;flex-wrap:wrap;gap:.8rem;margin:1rem 0}
.cardbox{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1rem 1.2rem;min-width:130px;flex:1;box-shadow:0 1px 2px rgba(20,25,35,.04)}
.cardbox .num{font-size:1.5rem;font-weight:700;color:var(--accent)}
.cardbox .lbl{color:var(--muted);font-size:.8rem;margin-top:.2rem}

/* Modal produk */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;z-index:50;overflow-y:auto;padding:2rem 1rem}
.modal-box{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1.5rem;width:100%;max-width:640px;margin:auto}
.modal-box h2{margin:.2rem 0 1rem;color:var(--brand)}
.modal-box h3{margin:1.1rem 0 .5rem;font-size:1rem}
.modal-box label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted);flex:1}
.modal-box label.pm-full{width:100%}
.modal-box label.pm-inline{flex-direction:row;align-items:center;gap:.4rem;flex:0 0 auto;color:var(--text)}
.pm-thumb{max-width:70px;max-height:70px;border-radius:8px;border:1px solid var(--border);object-fit:cover;display:none}
.pm-thumb[src]{display:inline-block}
.pm-var,.pm-support{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:.6rem;margin-bottom:.5rem}

/* Panel booking manual */
.manualpanel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1rem;margin:.8rem 0}
.mbook{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:.7rem;margin-bottom:.6rem}

/* Modal Kirim via Mengantar */
.mgo-overlay{position:fixed;inset:0;background:rgba(20,25,35,.55);display:flex;align-items:flex-start;justify-content:center;z-index:80;overflow-y:auto;padding:2rem 1rem;margin:0}
.mgo-box{background:#fff;color:#1f2733;border-radius:14px;width:100%;max-width:1000px;margin:auto;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.mgo-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.4rem;border-bottom:1px solid #eef1f5}
.mgo-head h2{margin:0;font-size:1.1rem}
.mgo-body{padding:1.2rem 1.4rem;max-height:70vh;overflow-y:auto}
.mgo-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}
.mgo-config{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem;margin-bottom:1rem;background:#f7f8fa;border:1px solid #eef1f5;border-radius:12px;padding:1rem}
.mgo-field{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;color:#434c58}
.mgo-field select,.mgo-field input{background:#fff}
.mgo-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.mgo-foot{display:flex;justify-content:flex-end;gap:.6rem;padding:1rem 1.4rem;border-top:1px solid #eef1f5}
@media(max-width:720px){.mgo-summary{grid-template-columns:1fr}.mgo-config{grid-template-columns:1fr}}

/* Hasil pencarian alamat */
.searchres{display:flex;flex-direction:column;gap:.2rem;margin:.3rem 0}
.resitem{padding:.5rem .7rem;background:var(--panel2);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:.85rem}
.resitem:hover{border-color:var(--brand)}

/* Badge */
.badge{font-size:.7rem;padding:.1rem .45rem;border-radius:20px;background:var(--panel2);color:var(--muted)}
.badge.escalated,.badge.high{background:#fde0e0;color:#c93a3a}
.badge.takeover{background:#fdf3d7;color:#b7791f}
.badge.agent,.badge.intent{background:#d7f5e3;color:#1a8a4e}

/* Console Live */
.console{display:flex;gap:1rem;height:80vh}
.convcol{width:300px;display:flex;flex-direction:column;flex:0 0 auto}
.convsearch{margin-bottom:.5rem;width:100%}
.convlist{flex:1;overflow-y:auto;border:1px solid var(--border);border-radius:12px;padding:.4rem;background:var(--panel)}
.convinfo{width:300px;flex:0 0 auto;align-self:flex-start;max-height:100%;overflow-y:auto;border:1px solid var(--border);border-radius:12px;padding:1rem;background:var(--panel)}
.convinfo h3{margin:.2rem 0 .6rem}
.inforow{display:flex;justify-content:space-between;gap:.5rem;padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.85rem}
.inforow .lbl{color:var(--muted)}
.inforow .val{text-align:right;font-weight:600}
.convitem{padding:.6rem;border-radius:8px;cursor:pointer;border-bottom:1px solid var(--border)}
.convitem:hover,.convitem.sel{background:var(--panel2)}
.convchat{flex:1;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;padding:.8rem;background:var(--panel)}
.convheader{padding:.3rem .2rem .6rem;border-bottom:1px solid var(--border);margin-bottom:.5rem;font-size:.9rem}
.convchat .chatbox{flex:1;border:none;background:transparent;margin:.4rem 0;height:auto}
canvas{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:.6rem;margin-top:.6rem}
@media(max-width:720px){.app-body{flex-direction:column}.sidebar{width:100%}.grid{grid-template-columns:1fr}.console{flex-direction:column;height:auto}.convcol,.convinfo{width:100%}.convlist{max-height:30vh}}

/* ===== Detail Order redesign (light, jagaai-style) ===== */
.orders2{background:#fff;color:#1f2733;border-radius:14px;padding:1.3rem 1.5rem;border:1px solid #e6e9ef}
.orders2 h1{color:#1f2733;margin:0 0 .3rem}
.o-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.1rem 0 1.3rem}
.o-stat{background:#fff;border:1px solid #e6e9ef;border-radius:14px;padding:1.2rem 1rem;text-align:center;box-shadow:0 1px 2px rgba(20,25,35,.04)}
.o-stat .n{font-size:1.9rem;font-weight:800;color:#f59331;line-height:1}
.o-stat .l{color:#3a4350;font-size:.85rem;margin-top:.45rem}
.o-toolbar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.4rem}
.o-search{margin-left:auto;background:#fff;border:1px solid #d7dbe2;color:#2b3441;min-width:220px}
.btn-primary{background:#1f6feb;color:#fff}
.btn-primary:hover{background:#175fd0}
.btn-light{background:#fff;border:1px solid #d7dbe2;color:#3a424e;font-weight:600}
.btn-light:hover{background:#f3f5f8}
.o-table{width:100%;border-collapse:collapse;font-size:.85rem;color:#2b3441;margin-top:.8rem}
.o-table th{color:#434c58;font-weight:600;border-bottom:1px solid #e6e9ef;padding:.7rem .6rem;white-space:nowrap;background:#fff}
.o-table td{border-bottom:1px solid #eef1f5;padding:.7rem .6rem;vertical-align:top}
.o-table tr:hover td{background:#fafbfc}
.o-id{color:#1f6feb;font-weight:600;cursor:pointer}
.o-name{color:#1f6feb;font-weight:600;cursor:pointer;display:block}
.o-name:hover,.o-id:hover{text-decoration:underline}
.o-phone{color:#434c58;font-size:.78rem}
.pill{display:inline-block;font-size:.72rem;padding:.2rem .6rem;border-radius:20px;font-weight:600;white-space:nowrap}
.pill.pending{background:#fdf3d7;color:#b7791f}
.pill.shipped{background:#dbeafe;color:#1e5fbf}
.pill.done{background:#d7f5e3;color:#1a8a4e}
.pill.cancel{background:#eceef1;color:#3a4350}
.pill.returned{background:#fde6d2;color:#b5651d}
.pill.unpaid{background:#fde0e0;color:#c93a3a}
.pill.paid{background:#d7f5e3;color:#1a8a4e}
.o-actions{position:relative}
.o-actions>.btn-light{padding:.35rem .7rem;font-size:.8rem}
.amenu{position:absolute;right:0;top:100%;margin-top:.2rem;background:#fff;border:1px solid #e6e9ef;border-radius:10px;box-shadow:0 8px 24px rgba(20,25,35,.14);min-width:150px;z-index:30;display:none;overflow:hidden}
.amenu.open{display:block}
.amenu button{display:block;width:100%;text-align:left;background:none;color:#2b3441;border:none;border-radius:0;padding:.55rem .85rem;font-weight:500;font-size:.82rem}
.amenu button:hover{background:#f3f5f8}
.amenu button.danger{color:#c93a3a}
.amenu button.danger:hover{background:#fde0e0}
/* invoice modal */
.inv-modal{position:fixed;inset:0;background:rgba(20,25,35,.55);display:flex;align-items:flex-start;justify-content:center;z-index:80;overflow-y:auto;padding:2.5rem 1rem}
.inv-box{background:#fff;color:#1f2733;border-radius:14px;width:100%;max-width:720px;margin:auto;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.inv-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.4rem;border-bottom:1px solid #eef1f5}
.inv-head h2{margin:0;font-size:1.1rem}
.inv-x{background:none;border:none;color:#434c58;font-size:1.2rem;cursor:pointer;padding:.2rem .4rem}
.inv-x:hover{color:#2b3441}
.inv-body{padding:1.4rem}
.inv-row{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.inv-store{font-weight:600;font-size:1.05rem}
.inv-no{text-align:right}
.inv-no .big{font-size:1.15rem;font-weight:800}
.inv-no .sub{color:#434c58;font-size:.82rem}
.inv-cust{font-size:1.15rem;font-weight:700;margin:1rem 0 .3rem}
.inv-line{color:#3a424e;font-size:.9rem;margin:.2rem 0}
.inv-unpaid{background:#eef0f3;color:#6b7280;font-weight:700;padding:.45rem 1.1rem;border-radius:6px;align-self:center;white-space:nowrap}
.inv-unpaid.paid{background:#d7f5e3;color:#1a8a4e}
.inv-qty{color:#434c58;font-weight:500}
.inv-resi{margin-top:1.1rem}
.inv-items{margin-top:1.3rem}
.inv-items .ih{display:flex;justify-content:space-between;font-weight:700;border-bottom:2px solid #1f2733;padding-bottom:.5rem}
.inv-item{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px dashed #e0e4ea}
.inv-item .sub{color:#434c58;font-size:.82rem;margin-top:.15rem}
.inv-total{display:flex;justify-content:space-between;font-size:1.15rem;font-weight:800;padding:1.1rem 1.4rem;background:#f7f8fa;border-top:1px solid #eef1f5}
.inv-total .amt{color:#1f6feb}
.inv-foot{display:flex;justify-content:flex-end;gap:.6rem;padding:1rem 1.4rem;border-top:1px solid #eef1f5}
/* filter produk & tanggal */
#prodFilter{padding:.45rem .6rem;font-size:.85rem}
.o-daterange{position:relative}
#dateBtn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .7rem;font-size:.85rem}
.dr-panel{position:absolute;right:0;top:calc(100% + .35rem);background:#fff;border:1px solid #e6e9ef;border-radius:12px;box-shadow:0 14px 44px rgba(20,25,35,.2);z-index:60;display:none;min-width:640px}
.dr-panel.open{display:flex}
.dr-presets{width:150px;border-right:1px solid #eef1f5;padding:.6rem;display:flex;flex-direction:column;gap:.15rem}
.dr-presets button{background:none;border:none;text-align:left;color:#2b3441;padding:.5rem .6rem;border-radius:8px;font-weight:500;font-size:.85rem;cursor:pointer}
.dr-presets button:hover{background:#f3f5f8}
.dr-presets button.on{background:#1f5fbf;color:#fff}
.dr-right{flex:1;padding:.9rem 1rem 1rem;position:relative}
.dr-calhead{position:absolute;top:.9rem;left:1rem;right:1rem;display:flex;justify-content:space-between;pointer-events:none}
.dr-nav{background:none;border:none;color:#1f6feb;font-size:1.2rem;line-height:1;cursor:pointer;pointer-events:auto;padding:0 .3rem;font-weight:700}
.dr-grids{display:flex;gap:1.4rem}
.dr-month{width:220px}
.dr-mtitle{text-align:center;font-weight:700;color:#1f2733;margin-bottom:.5rem;font-size:.9rem}
.dr-dow,.dr-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.12rem}
.dr-dow span{text-align:center;color:#434c58;font-size:.72rem;padding:.2rem 0}
.dr-dow span.we{color:#c93a3a}
.dr-day{text-align:center;padding:.38rem 0;font-size:.8rem;color:#2b3441;border-radius:6px;cursor:pointer}
.dr-day.we{color:#c93a3a}
.dr-day:hover{background:#eef4ff}
.dr-day.inr{background:#e6effc}
.dr-day.sel{background:#1f5fbf;color:#fff}
.dr-foot{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.9rem}
@media(max-width:720px){.o-stats{grid-template-columns:repeat(2,1fr)}.dr-panel{min-width:0;left:0;right:auto;flex-direction:column}.dr-grids{flex-direction:column}}

/* bayangan halus panel untuk tema terang + separator sidebar */
.card,.chatbox,.modal-box,.manualpanel,.convinfo,.convlist,.convchat,.statusbox .item,canvas{box-shadow:0 1px 2px rgba(20,25,35,.04)}
.sidebar{box-shadow:1px 0 2px rgba(20,25,35,.03)}
.bubble.assistant{border:1px solid var(--border)}

/* ===== Console Live gaya WhatsApp ===== */
.convchat .chatbox{background:#efeae2;padding:.7rem .85rem;background-image:radial-gradient(rgba(0,0,0,.03) 1px,transparent 1px);background-size:22px 22px}
.reply-row{display:flex;gap:.4rem;align-items:center;margin-top:.4rem}
.reply-row #replyInput{flex:1}
.icon-btn{background:transparent;border:1px solid var(--border);color:#3a4350;padding:.5rem .6rem;border-radius:8px;font-size:1.05rem;line-height:1}
.icon-btn:hover{background:var(--panel2)}
.emoji-panel{display:flex;flex-wrap:wrap;gap:.1rem;background:#fff;border:1px solid var(--border);border-radius:10px;padding:.5rem;max-height:170px;overflow-y:auto;box-shadow:0 8px 24px rgba(20,25,35,.14);margin-bottom:.3rem}
.emoji-panel button{background:none;border:none;font-size:1.25rem;padding:.15rem;cursor:pointer;border-radius:6px}
.emoji-panel button:hover{background:#f3f5f8}
.brow{display:flex;margin:.12rem 0}
.brow.me{justify-content:flex-end}
.brow.them{justify-content:flex-start}
.bubble2{max-width:74%;padding:.45rem .65rem .3rem;border-radius:10px;font-size:.9rem;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 1px rgba(20,25,35,.08)}
.bubble2.them{background:#fff;border:1px solid #e6e9ef;border-top-left-radius:3px}
.bubble2.me{background:#d9fdd3;border-top-right-radius:3px}
.bmetawrap{display:flex;justify-content:flex-end;margin-top:.1rem}
.bmeta{font-size:.68rem;color:#3a4350}
.bmeta b{color:#1a8a4e;font-weight:700}
.tick{margin-left:.2rem;color:#5b6470;font-weight:800;font-size:.82rem;letter-spacing:-1px}
.tick.read{color:#34b7f1}
.presence{color:#1a8a4e;font-size:.82rem;font-style:italic;margin-left:.3rem}
.convitem-top{display:flex;justify-content:space-between;align-items:center;gap:.4rem}
.unread-badge{background:#25d366;color:#fff;font-size:.7rem;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 .35rem;font-weight:700}
.unread-txt{color:#1f2733!important;font-weight:600}