/* FTradings Manager — tampilan desktop (tata letak ala MT5 Manager). Token warna dari app.css. */
:root{--dk-bg:#e9ecf1;--dk-panel:#ffffff;--dk-head:#f3f5f8;--dk-line:#d5dae2;--dk-sel:#cfe0ff;--dk-selfg:#0b2a66;--dk-title:#5d6b82;--dk-fg:#14171c;--dk-mut:#6b7686;--dk-hover:#eef3ff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--dk-bg:#0c0e12;--dk-panel:#15181e;--dk-head:#1b1f26;--dk-line:#2a2f38;--dk-sel:#24406f;--dk-selfg:#e6eeff;--dk-title:#8f9bb0;--dk-fg:#e6e8eb;--dk-mut:#8e96a3;--dk-hover:#1d2533}}
:root[data-theme="dark"]{--dk-bg:#0c0e12;--dk-panel:#15181e;--dk-head:#1b1f26;--dk-line:#2a2f38;--dk-sel:#24406f;--dk-selfg:#e6eeff;--dk-title:#8f9bb0;--dk-fg:#e6e8eb;--dk-mut:#8e96a3;--dk-hover:#1d2533}
body.desk{background:var(--dk-bg);color:var(--dk-fg);font:12px/1.35 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;overflow:hidden;height:100vh}
body.desk #shell,body.desk #toast{display:none}
#desk{display:grid;height:100vh;grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-columns:360px 1fr 300px}
#desk .menubar{grid-column:1/-1;display:flex;gap:2px;align-items:center;background:var(--dk-panel);border-bottom:1px solid var(--dk-line);padding:0 6px;height:26px;position:relative;z-index:30}
#desk .menubar .brand{font-weight:700;margin-right:12px;color:var(--pri)}
#desk .menubar .mi{padding:3px 9px;border-radius:3px;cursor:default;position:relative}
#desk .menubar .mi:hover,#desk .menubar .mi.open{background:var(--dk-hover)}
#desk .menubar .dd{display:none;position:absolute;left:0;top:24px;background:var(--dk-panel);border:1px solid var(--dk-line);box-shadow:0 6px 18px rgba(0,0,0,.18);min-width:230px;padding:4px 0;z-index:40}
#desk .menubar .mi.open .dd{display:block}
#desk .dd .it{padding:5px 16px;display:flex;gap:18px;white-space:nowrap}#desk .dd .it:hover{background:var(--dk-sel);color:var(--dk-selfg)}
#desk .dd .it .k{margin-left:auto;color:var(--dk-mut)}#desk .dd hr{border:0;border-top:1px solid var(--dk-line);margin:4px 0}
#desk .menubar .right{margin-left:auto;display:flex;gap:10px;align-items:center;color:var(--dk-mut)}
#desk .toolbar{grid-column:1/-1;display:flex;gap:4px;align-items:center;background:var(--dk-head);border-bottom:1px solid var(--dk-line);padding:3px 6px}
#desk .tb{border:1px solid transparent;background:none;color:var(--dk-fg);padding:3px 8px;border-radius:3px;font:inherit;display:flex;gap:5px;align-items:center;cursor:pointer;min-height:24px}
#desk .tb:hover{background:var(--dk-hover);border-color:var(--dk-line)}#desk .tb.on{background:var(--dk-sel);color:var(--dk-selfg);border-color:var(--dk-line)}
#desk .tb .i{font-size:14px}#desk .sep{width:1px;height:18px;background:var(--dk-line);margin:0 4px}
#desk .toolbar input{width:220px;padding:3px 8px;font:inherit;border:1px solid var(--dk-line);border-radius:3px;background:var(--dk-panel);color:var(--dk-fg)}
#desk .col{display:flex;flex-direction:column;min-height:0;gap:3px;padding:3px;overflow:hidden}
#desk .left{grid-column:1;grid-row:3}#desk .right{grid-column:3;grid-row:3}
#desk .center{grid-column:2;grid-row:3;display:flex;flex-direction:column;min-width:0;min-height:0;padding:3px 0}
#desk .pnl{background:var(--dk-panel);border:1px solid var(--dk-line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
#desk .pnl>.ttl{background:var(--dk-head);color:var(--dk-title);padding:3px 8px;border-bottom:1px solid var(--dk-line);display:flex;gap:6px;align-items:center;font-weight:600}
#desk .pnl>.ttl .x{margin-left:auto;cursor:pointer;color:var(--dk-mut)}
#desk .pnl>.body{flex:1;overflow:auto;min-height:0}
#desk .pnl>.tabs{display:flex;border-top:1px solid var(--dk-line);background:var(--dk-head);position:static;left:auto;right:auto;bottom:auto;padding-bottom:0;z-index:auto}
#desk .pnl>.tabs span,#desk .wtabs span,#desk .tbx-tabs span{padding:4px 12px;cursor:pointer;color:var(--dk-mut);border-right:1px solid var(--dk-line);white-space:nowrap}
#desk .pnl>.tabs span.on,#desk .tbx-tabs span.on{background:var(--dk-panel);color:var(--dk-fg);font-weight:600}
#desk .wtabs{display:flex;background:var(--dk-head);border:1px solid var(--dk-line);border-bottom:0;overflow-x:auto}
#desk .wtabs span.on{background:var(--dk-panel);color:var(--dk-fg);font-weight:600;box-shadow:inset 0 2px 0 var(--pri)}
#desk .wtabs span b{margin-left:8px;color:var(--dk-mut);font-weight:400}#desk .wtabs span b:hover{color:var(--sell)}
#desk .warea{flex:1;background:var(--dk-panel);border:1px solid var(--dk-line);overflow:auto;min-height:0;position:relative}
#desk .warea .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dk-mut);text-align:center;padding:20px}
#desk .toolbox{grid-column:1/-1;grid-row:4;height:230px;display:flex;flex-direction:column;background:var(--dk-panel);border-top:1px solid var(--dk-line)}
#desk .toolbox.min{height:auto}#desk .toolbox.min .tbx-body{display:none}
#desk .tbx-body{flex:1;overflow:auto;min-height:0}
#desk .tbx-tabs{display:flex;background:var(--dk-head);border-top:1px solid var(--dk-line)}
#desk .status{grid-column:1/-1;grid-row:5;display:flex;gap:16px;padding:2px 8px;background:var(--dk-head);border-top:1px solid var(--dk-line);color:var(--dk-mut);white-space:nowrap;overflow:hidden}
#desk .status .ok{color:var(--buy)}#desk .status .bad{color:var(--sell)}
/* tree */
#desk .tree{padding:4px 2px}#desk .tree .n{padding:2px 6px 2px calc(6px + var(--d,0)*16px);cursor:default;display:flex;gap:6px;align-items:center;white-space:nowrap;border-radius:2px}
#desk .tree .n:hover{background:var(--dk-hover)}#desk .tree .n.sel{background:var(--dk-sel);color:var(--dk-selfg)}#desk .tree .n .tw{width:10px;color:var(--dk-mut)}
/* grid */
table.g{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums}
table.g th{position:sticky;top:0;z-index:2;background:var(--dk-head);color:var(--dk-title);font-weight:600;text-align:left;padding:3px 8px;border-bottom:1px solid var(--dk-line);border-right:1px solid var(--dk-line);white-space:nowrap;cursor:pointer;user-select:none}
table.g th.r,table.g td.r{text-align:right}table.g th .ar{color:var(--pri);margin-left:4px}
table.g td{padding:2px 8px;border-bottom:1px solid var(--dk-line);white-space:nowrap}
table.g tr:nth-child(even) td{background:color-mix(in srgb,var(--dk-head) 45%,transparent)}
table.g tbody tr:hover td{background:var(--dk-hover)}table.g tr.sel td{background:var(--dk-sel)!important;color:var(--dk-selfg)}
table.g tfoot td{position:sticky;bottom:0;background:var(--dk-head);font-weight:700;border-top:1px solid var(--dk-line)}
table.g .buy{color:var(--buy)}table.g .sell{color:var(--sell)}table.g .up{color:var(--buy)}table.g .dn{color:var(--sell)}
.ctx{position:fixed;z-index:60;background:var(--dk-panel);border:1px solid var(--dk-line);box-shadow:0 6px 18px rgba(0,0,0,.2);padding:4px 0;min-width:210px;font-size:12px}
.ctx .it{padding:5px 16px;cursor:default}.ctx .it:hover{background:var(--dk-sel);color:var(--dk-selfg)}.ctx hr{border:0;border-top:1px solid var(--dk-line);margin:4px 0}
/* forms / windows */
.wv{padding:10px 12px}.wv h3{margin:0 0 8px;font-size:14px}.wv .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wv .kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 16px;margin-bottom:10px}
.wv .kv div{display:flex;justify-content:space-between;border-bottom:1px dotted var(--dk-line);padding:2px 0}.wv .kv span{color:var(--dk-mut)}
.wv label{display:block;font-size:11px;color:var(--dk-mut);margin:6px 0 2px}
.wv input,.wv select,.wv textarea{width:100%;padding:4px 6px;font:inherit;border:1px solid var(--dk-line);border-radius:3px;background:var(--dk-panel);color:var(--dk-fg)}
.wv .f4{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:4px 10px}
.wv .f3{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:4px 10px}
.wv .btn{min-height:28px;padding:4px 14px;font-size:12px;border-radius:3px}
.subtabs{display:flex;border-bottom:1px solid var(--dk-line);background:var(--dk-head);position:sticky;top:0;z-index:3}
.subtabs span{padding:5px 14px;cursor:pointer;color:var(--dk-mut);border-right:1px solid var(--dk-line)}.subtabs span.on{background:var(--dk-panel);color:var(--dk-fg);font-weight:600}
.split{display:grid;grid-template-rows:auto 1fr 1fr;height:100%}
.dealer-top{display:flex;gap:14px;align-items:center;justify-content:center;padding:12px;border-bottom:1px solid var(--dk-line);flex-wrap:wrap}
.pricebox{display:flex;align-items:center;gap:4px}.pricebox .pv{font-size:26px;font-weight:700;min-width:140px;text-align:center;border:1px solid var(--dk-line);padding:6px 10px;border-radius:4px;font-variant-numeric:tabular-nums}
.pricebox .sp{display:flex;flex-direction:column;gap:2px}.pricebox .sp button{width:26px;height:20px;padding:0;font-size:10px}
.reqinfo{min-width:280px;text-align:center;font-size:14px}
.chartwrap{display:flex;flex-direction:column;height:100%}.chartwrap canvas{flex:1;width:100%;min-height:0}
.minibar{display:flex;gap:4px;padding:4px 8px;border-bottom:1px solid var(--dk-line);align-items:center;flex-wrap:wrap}
.pill{display:inline-block;padding:0 6px;border-radius:8px;background:var(--chip);font-size:11px}
.pill.mc{background:#fff2cc;color:#7a5200}.pill.so{background:#ffd9d6;color:#8a1209}
.lvlbar{height:4px;background:var(--chip);border-radius:2px;margin-top:2px}.lvlbar i{display:block;height:100%;border-radius:2px}
.hide{display:none!important}
table.g .btn.buy,table.g .btn.sell{color:#fff}table.g .btn{padding:2px 10px;min-height:22px}

#dk-mw table.g td,#dk-mw table.g th{padding:2px 5px}
/* ---- tampilan padat: view versi HP (Aturan dealing, API console) saat dipakai di desktop ---- */
body.desk #dk-warea > div > div[style*="max-width"]{max-width:none!important;padding:6px 8px!important}
body.desk #dk-warea .card{padding:8px 10px;margin-bottom:6px;border-radius:4px}
body.desk #dk-warea .card b{font-size:12px}
body.desk #dk-warea label{font-size:11px;margin:4px 0 1px}
body.desk #dk-warea input,body.desk #dk-warea select,body.desk #dk-warea textarea{padding:3px 6px;font-size:12px;border-radius:3px;min-height:26px}
body.desk #dk-warea .btn{min-height:26px;padding:3px 12px;font-size:12px;border-radius:3px}
body.desk #dk-warea .btn.sm{min-height:22px;padding:1px 8px;font-size:11px}
body.desk #dk-warea .grid2{grid-template-columns:repeat(4,minmax(150px,1fr));gap:4px 10px}
body.desk #dk-warea .grid3{grid-template-columns:repeat(3,minmax(120px,220px));gap:6px}
body.desk #dk-warea .mut{font-size:11px}
body.desk #dk-warea .list .item{padding:4px 2px;gap:8px;align-items:center}
body.desk #dk-warea .list .item > .sp{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(200px,1.5fr) minmax(220px,1.3fr);gap:2px 14px;align-items:center}
body.desk #dk-warea .list .item > .sp > *{margin:0}
body.desk #dk-warea .list .item > div[style*="column"]{flex-direction:row!important;gap:4px!important}
body.desk #dk-warea .list .item:hover{background:var(--dk-hover)}
body.desk #dk-warea .row > .btn,body.desk #dk-warea .grid2 > .btn{width:auto!important}
body.desk #dk-warea pre{max-height:none}
/* toolbar satu baris, Market Watch muat 6 kolom */
#desk .toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}#desk .tb{white-space:nowrap;flex:none}#desk .toolbar input{flex:0 1 220px;min-width:120px}
#dk-mw table.g td,#dk-mw table.g th{padding:2px 4px;font-size:11.5px}
/* Toolbox menyesuaikan isi (tidak ada kotak kosong besar) */
#desk .toolbox{height:auto}#desk .tbx-body{max-height:210px;min-height:48px}
#desk .minibar input,#desk .minibar select{width:auto;padding:2px 6px;font:inherit;border:1px solid var(--dk-line);border-radius:3px;background:var(--dk-panel);color:var(--dk-fg)}