*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}
body{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:13px;background:#aaa;color:#000}
button,input,select,textarea{font:inherit;color:#000}
.hidden{display:none!important}
/* Login - Legacy */
.login-screen{
position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:999999;
background:
linear-gradient(135deg,rgba(255,255,255,.14) 25%,transparent 25%) 0 0/20px 20px,
linear-gradient(315deg,rgba(0,0,0,.06) 25%,transparent 25%) 0 0/20px 20px,
#5d7893;
}
.login-dialog{
width:min(465px,calc(100vw - 28px));background:#c6d8e7;
border:2px outset #eaf3fb;box-shadow:8px 10px 24px rgba(0,0,0,.42);
}
.login-titlebar{
height:30px;display:flex;align-items:center;padding:0 7px;color:#fff;font-size:12px;font-weight:600;
background:linear-gradient(90deg,#173d73,#3e79ad 70%,#91b6d4);border-bottom:1px solid #15375f;
}
.login-title-icon{font-size:17px;margin-right:7px}
.login-title-buttons{margin-left:auto;letter-spacing:-2px;color:#fff}
.legacy-titlebar{height:29px;background:#fff;border-bottom:1px solid #aaa;display:flex;align-items:center;padding:0 9px;font-size:12px}
.login-content{padding:18px 22px 17px}
.login-brand{display:flex;align-items:center;justify-content:center;gap:13px;margin:2px 0 16px}
.login-brand-icon{
width:54px;height:54px;display:grid;place-items:center;font-size:38px;line-height:1;color:#173d73;
background:#eaf4fb;border:2px outset #fff;box-shadow:inset 0 0 0 1px #8da7bd;
}
.login-brand-name{font:700 23px Tahoma,Arial,sans-serif;letter-spacing:.2px;color:#102f54}
.login-brand-subtitle{margin-top:3px;color:#36556f;font-size:12px}
.login-groupbox{margin:0;padding:15px 16px 11px;border:2px groove #eef6fb;background:#bfd1e0}
.login-groupbox legend{padding:0 7px;font-weight:600;color:#173d73}
.legacy-form-row{display:grid;grid-template-columns:92px 1fr;align-items:center;margin:9px 0;gap:10px}
.legacy-form-row input{height:29px;border:2px inset #f4f4f4;background:#fff;padding:3px 6px;outline:none}
.legacy-form-row input:focus{border-color:#1f5f9b;box-shadow:0 0 0 1px #fff inset}
.login-error{min-height:25px;color:#8a0000;padding:6px 4px 0;font-size:12px}
.login-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.login-hint{color:#36556f;font-size:11px;line-height:1.3}
.legacy-button-row{display:flex;justify-content:flex-end;gap:8px;text-align:right;margin-top:5px}
.legacy-button-row button,.legacy-button{min-width:78px;height:31px;background:#eee;border:2px outset #fff;padding:2px 13px}
.legacy-button-row button:active,.legacy-button:active{background:#ddd;border-style:inset}
/* Main exact-style shell */
.legacy-app{position:fixed;inset:0;display:grid;grid-template-rows:20px 20px 64px 70px 70px 42px 42px 1fr 27px;background:#aaa}
.app-titlebar{height:20px;background:#fafafa;display:flex;align-items:center;padding:0 4px;font-size:11px;white-space:nowrap}
.app-titlebar .spade{font-size:15px;margin-right:4px;color:#8b6f38}
.fake-win-buttons{margin-left:auto;font-size:12px;letter-spacing:4px;color:#333}
.app-menubar{height:20px;background:#a9c6e5;display:flex;align-items:stretch;padding-left:3px;border-bottom:1px solid #8da7c2}
.app-menubar button{height:20px;border:0;background:transparent;padding:0 9px;font-size:11px;text-align:left}
.app-menubar button:hover,.app-menubar button.menu-open{background:#f4f4f4;border-left:1px solid #aaa;border-right:1px solid #aaa}
.app-menubar button:disabled{color:#6f8293;text-shadow:1px 1px #dbe9f5;background:transparent;border:0}
.group-row{background:#ccc;display:flex;align-items:center;padding:0 14px;gap:16px;position:relative}
.group-row>label{font-size:17px}
.group-row select{width:186px;height:31px;border:1px solid #aaa;background:#eee;padding:2px 7px;font-size:16px}
.group-row .legacy-button{height:31px;min-width:64px;font-size:16px}
.legacy-clock{font-size:20px;color:#0078d7;margin-left:-4px}
.active-group{margin-left:auto;font-size:20px;color:#0078d7;padding-right:6px}
.member-row{background:#efefef;display:grid;grid-template-columns:90px 186px 64px 1fr 78px;align-items:center;gap:16px;padding-left:14px}
.member-row>label{font-size:17px}
.member-row input{height:27px;border:1px solid #999;background:white;padding:2px 5px;font-size:16px}
.member-row .legacy-button{height:31px;font-size:16px}
.member-row input:disabled,.member-row button:disabled{color:#999;background:#ddd}
.member-quick-info{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-detail-button{align-self:stretch;margin:0;border:1px solid #aaa;background:#eee;font-size:16px;line-height:18px}
.summary-row{background:#d7e4f2;border-bottom:1px solid #555;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;text-align:center;font-size:20px}
.summary-row.summary-neutral{background:#d7e4f2}
.summary-row.summary-win{background:#90ee90}
.summary-row.summary-loss{background:#ffb6c1}
.summary-row span{font-weight:400}
.quick-transaction-row{
min-width:900px;display:flex;align-items:center;gap:10px;padding:6px 14px;
background:#a9c6e5;border-top:1px solid #e4eef8;border-bottom:1px solid #7896b4;
overflow:hidden
}
.quick-transaction-row label{flex:0 0 auto;white-space:nowrap;font-size:12px}
.quick-transaction-row input,.quick-transaction-row select{
height:28px;min-width:0;border:2px inset #f4f4f4;background:#fff;padding:2px 6px;outline:none
}
.quick-transaction-row input:focus,.quick-transaction-row select:focus{border-color:#1f5f9b}
.quick-deposit-row #quickDepositAmount{flex:0 1 150px;min-width:100px}
.quick-deposit-row #quickDepositNotes{flex:1 1 300px;min-width:100px;text-align:left}
.quick-deposit-row #quickDepositAccount{flex:1.25 1 420px;min-width:210px}
.quick-withdraw-row{gap:8px}
.quick-withdraw-row #quickWithdrawAmount{flex:0 1 110px;min-width:72px}
.quick-withdraw-row #quickWithdrawNotes{flex:1 1 220px;min-width:70px;text-align:left}
.quick-withdraw-row #quickWithdrawAccount{flex:1.2 1 310px;min-width:145px}
.quick-withdraw-row #quickWithdrawFee{flex:0 1 105px;min-width:72px}
.quick-transaction-row button{
flex:0 0 88px;height:30px;background:#eee;border:2px outset #fff;padding:2px 12px
}
.quick-withdraw-row button{flex-basis:80px;padding-left:8px;padding-right:8px}
.quick-transaction-row button:active:not(:disabled){background:#ddd;border-style:inset}
.quick-transaction-row input:disabled,.quick-transaction-row select:disabled,.quick-transaction-row button:disabled{
color:#777;background:#d7d7d7
}
.transaction-area{min-height:0;display:block;overflow:hidden;background:#aaa}
.transaction-area.group-not-selected{background:#aaa}
.main-grid-wrap{width:100%;height:100%;min-height:0;overflow:auto;background:#aaa}
.main-grid{border-collapse:collapse;width:calc(100% - 180px);min-width:1180px;background:#fff;table-layout:fixed;font-size:13px}
.main-grid th,.main-grid td{border:1px solid #9c9c9c;height:20px;padding:1px 6px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.main-grid thead th{height:24px;background:#fafafa;font-weight:400;text-align:left;font-size:14px;position:sticky;top:0;z-index:2;overflow:visible}
.main-column-resizer{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:3;touch-action:none}
.main-column-resizer:hover,.main-grid thead th.column-resizing .main-column-resizer{background:rgba(0,120,215,.35)}
body.resizing-columns,body.resizing-columns *{cursor:col-resize!important;user-select:none!important}
.main-grid .row-head{width:43px;padding:0}
.main-grid th:nth-child(2){width:174px}
.main-grid th:nth-child(3){width:90px}
.main-grid th:nth-child(4){width:105px}
.main-grid th:nth-child(5){width:105px}
.main-grid th:nth-child(6){width:105px}
.main-grid th:nth-child(7){width:175px}
.main-grid th:nth-child(8){width:110px}
.main-grid th:nth-child(9){width:285px}
.main-grid th:nth-child(10){width:300px}
.main-grid td.num{text-align:right}
.main-grid tbody tr:nth-child(odd){background:#e8ffff}
.main-grid tbody tr:nth-child(even){background:#fff}
.main-grid tbody tr.selected td{background:#0078d7!important;color:#fff}
.main-grid tbody tr.selected td.row-marker{background:#e7e7e7!important;color:#333}
.row-marker{text-align:left;width:43px;padding-left:4px!important}
.gray-workspace{display:none}
.shortcut-bar{background:#f6f6f6;border-top:1px solid #999;display:flex;align-items:center;padding:0 4px;font-size:12px}
/* Old Windows drop-down menu */
.legacy-dropdown,.legacy-context{position:fixed;background:#f4f4f4;border:1px solid #888;box-shadow:2px 3px 5px rgba(0,0,0,.35);z-index:500000;padding:3px 0;min-width:180px}
.legacy-context{min-width:145px}
.legacy-dropdown button,.legacy-context button{display:block;border:0;background:transparent;width:100%;height:24px;text-align:left;padding:0 12px 0 28px;font-size:12px;white-space:nowrap}
.legacy-dropdown button:hover,.legacy-context button:hover{background:#91c9f7;color:#000}
.legacy-dropdown button:disabled,.legacy-context button:disabled{color:#999;background:transparent}
.menu-separator{height:1px;background:#aaa;margin:3px 4px}
/* Dialogs: no overlay, just desktop style window */
.legacy-window{position:fixed;background:#eee;border:1px solid #777;box-shadow:3px 5px 12px rgba(0,0,0,.35);z-index:200000;overflow:hidden}
.legacy-window.active{z-index:210000}
.window-titlebar{height:28px;background:#fafafa;display:flex;align-items:center;border-bottom:1px solid #ddd;padding-left:8px;font-size:11px;user-select:none}
.window-caption{flex:1}
.window-close{width:31px;height:22px;margin-right:2px;border:0;background:#d75a4e;color:white;font-size:13px}
.window-body{position:absolute;left:0;right:0;top:28px;bottom:0;overflow:auto;background:#eee}
.window-footer{position:absolute;left:0;right:0;bottom:0;height:36px;background:#f4f4f4;border-top:1px solid #aaa;padding:8px 12px;font-size:12px}
/* Member Search */
.search-window{width:min(1245px,calc(100vw - 40px));height:min(575px,calc(100vh - 70px));left:50%;top:50%;transform:translate(-50%,-50%)}
.search-window .window-body{bottom:36px}
.member-search-top{height:180px;padding:12px 16px 8px;background:#eee;border-bottom:1px solid #444}
.search-title{font-size:16px;margin-bottom:7px}
.search-filter-grid{display:grid;grid-template-columns:1.35fr 1.05fr 1.05fr 190px;gap:9px 28px;align-items:center}
.filter-line{display:grid;grid-template-columns:18px 105px 1fr;gap:5px;align-items:center}
.filter-line.wide{grid-template-columns:18px 105px 1fr}
.filter-line input[type=checkbox]{width:14px;height:14px}
.filter-line input[type=text],.filter-line input[type=email],.filter-line select,.filter-line input[type=date]{height:26px;border:1px solid #aaa;background:white;padding:2px 5px;min-width:0;width:100%}
.date-range{display:grid;grid-template-columns:1fr 14px 1fr;gap:4px;align-items:center}
.search-buttons{grid-column:4;grid-row:1/4;display:grid;grid-template-columns:1fr 1fr;gap:14px 15px;align-content:start;padding-top:0}
.search-buttons button{height:43px;border:1px solid #aaa;background:#eee}
.username-search-line{
display:grid;
grid-template-columns:
105px
215px
1fr;
align-items:center;
column-gap:8px;
height:32px;
margin-top:4px;
padding:0;
}
.username-search-line label{
white-space:nowrap;
}
.username-search-line input{
width:215px;
height:25px;
border:1px solid #aaa;
background:#fff;
padding:2px 5px;
}
.member-count{
justify-self:end;
margin-left:0;
margin-right:185px;
font-size:17px;
font-weight:600;
white-space:nowrap;
}
.search-results{height:calc(100% - 170px);background:#aaa;overflow:auto}
.legacy-data{border-collapse:collapse;width:100%;min-width:1120px;background:#fff;font-size:12px}
.legacy-data th,.legacy-data td{border:1px solid #aaa;padding:2px 5px;height:20px;white-space:nowrap}
.legacy-data th{background:#f5f5f5;font-size:14px;font-weight:400;text-align:left}
.legacy-data tr.selected td{background:#0078d7;color:#fff}
.legacy-data .marker{width:43px;background:#eee;color:#333!important}
/* Transaction dialog */
.transaction-window{width:500px;height:730px;left:50%;top:50%;transform:translate(-50%,-50%);background:#c6d8e7}
.transaction-window .window-body{background:#c6d8e7;padding:20px 7px}
.member-blue-grid{display:grid;grid-template-columns:130px 18px 1fr;gap:9px 0;align-items:center;font-size:15px;margin-bottom:12px}
.blue-value{font-weight:700;color:#0000d8;font-size:16px}
.radio-row{display:flex;gap:30px;margin:4px 0 16px 0;align-items:center}
.radio-row label{display:flex;align-items:center;gap:5px;font-size:15px}
.legacy-groupbox{border:1px solid #f0f0f0;box-shadow:inset 0 0 0 1px #b2c2d2;padding:26px 14px 14px;position:relative;margin:18px 0 14px}
.legacy-groupbox>legend{position:absolute;top:-13px;left:8px;background:#c6d8e7;padding:0 4px;font-size:20px}
.transaction-fields{display:grid;grid-template-columns:145px 1fr;gap:9px 8px;align-items:center}
.transaction-fields input,.transaction-fields select,.transaction-fields textarea{border:1px solid #aaa;background:#fff;height:25px;padding:2px 4px}
.transaction-fields textarea{height:62px;resize:none}
.bonus-check{display:flex;align-items:center;gap:6px;margin:18px 0 2px 2px}
.balance-box{border:1px solid #eef5fa;box-shadow:inset 0 0 0 1px #b3c3d1;padding:11px 8px;margin-top:14px}
.balance-line{display:grid;grid-template-columns:190px 1fr;gap:8px;margin-bottom:8px;align-items:center}
.balance-line:last-child{margin-bottom:0}
.balance-line output{height:22px;background:#f5f5f5;border:1px solid #aaa;text-align:right;padding:2px 4px;color:#777}
.transaction-time{display:grid;grid-template-columns:130px 20px 1fr;align-items:center;margin:10px 0;color:#000}
.transaction-time b{color:#0000d8}
.transaction-buttons{display:flex;justify-content:center;gap:26px;margin-top:12px}
.transaction-buttons button{width:98px;height:38px;border:1px solid #aaa;background:#eee;font-size:14px}
/* Simple modal forms */
.simple-window{width:650px;height:475px;left:50%;top:50%;transform:translate(-50%,-50%)}
.simple-window .window-body{padding:16px 18px;background:#bfd1e0}
.simple-grid{display:grid;grid-template-columns:155px 1fr;gap:8px;align-items:center}
.simple-grid input,.simple-grid select,.simple-grid textarea{width:100%;min-height:27px;border:1px solid #aaa;background:white;padding:3px 5px}
.simple-grid textarea{height:80px;resize:vertical}
.simple-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:15px}
.simple-actions button{min-width:82px;height:32px;background:#eee;border:1px solid #aaa}
.list-window{width:min(1050px,calc(100vw - 40px));height:min(600px,calc(100vh - 70px));left:50%;top:50%;transform:translate(-50%,-50%)}
.list-window .window-body{padding:12px;background:#bfd1e0}
.tool-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.tool-row input,.tool-row select{height:27px;border:1px solid #aaa;background:#fff;padding:2px 5px}
.tool-row button{height:31px;border:1px solid #aaa;background:#eee;padding:0 14px}
.tool-row .grow{flex:1}
/* Input Bonus */
.input-bonus-window{width:410px;height:420px;left:50%;top:50%;transform:translate(-50%,-50%)}
.input-bonus-window .window-body{padding:12px 10px}
.bonus-top{display:grid;grid-template-columns:auto 110px 72px 18px 72px;gap:6px;align-items:center;font-size:15px}
.bonus-top select,.bonus-top input{height:25px;border:1px solid #aaa;background:white}
.bonus-bigbox{height:290px;border:1px solid #1683e8;background:white;margin:9px 0;overflow:auto;padding:5px;white-space:pre-wrap}
.bonus-bottom{display:flex;justify-content:space-between}
.bonus-bottom button{width:74px;height:28px;border:1px solid #aaa;background:#eee}
/* Pending/settings list */
.menu-list-table{width:100%;border-collapse:collapse;background:#fff}
.menu-list-table th,.menu-list-table td{border:1px solid #aaa;padding:3px 5px;white-space:nowrap}
.menu-list-table th{background:#f5f5f5;text-align:left;font-weight:400}
.menu-list-table tr.selected td{background:#0078d7;color:#fff}
/* Toast */
.legacy-toast{position:fixed;right:12px;bottom:35px;z-index:800000;background:#ffffe1;border:1px solid #666;box-shadow:2px 2px 4px rgba(0,0,0,.35);padding:9px 12px;max-width:430px}
.legacy-toast.error{background:#ffd8d8;border-color:#a00000}
.legacy-toast.ok{background:#e5ffe5;border-color:#278027}
/* Mobile fallback */
@media(max-width:900px){
.legacy-app{min-width:900px;overflow:auto}
html,body{overflow:auto}
.active-group{display:none}
}
/* layout tidy */
.transaction-window [data-bonusbox]{margin-top:18px}
.password-window{width:440px;height:325px;left:50%;top:50%;transform:translate(-50%,-50%)}
.password-window .window-body{padding:16px 18px;background:#eee}
.delete-warning{background:#fff4cf;border:1px solid #c8aa55;padding:9px 10px;margin-bottom:14px;line-height:1.35}
.coin-balance-window{width:min(1050px,calc(100vw - 30px));height:min(460px,calc(100vh - 30px));left:50%;top:50%;transform:translate(-50%,-50%)}
.coin-balance-window .window-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(70px,1fr) auto;gap:12px;background:#eef4fa;padding:14px;overflow:auto}
.coin-balance-window .coin-overview{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#173859}
.coin-balance-window .coin-overview-heading{display:flex;align-items:center;gap:10px}
.coin-balance-window .coin-overview-icon{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border:1px solid #e4be54;border-radius:50%;background:#fff0b9;color:#966900;font-size:24px;font-weight:700;background: url(/assets/img/coin.png) center center no-repeat;background-size: cover;}
.coin-balance-window h2{margin:0;font-size:19px;font-weight:700}
.coin-balance-window .coin-overview p{margin:3px 0 0;color:#536b82;font-size:12px}
.coin-balance-window .coin-group-badge{max-width:100%;overflow-wrap:anywhere;padding:6px 10px;border:1px solid #c1d9ed;border-radius:5px;background:#e0efff;font-size:12px}
.coin-balance-window .coin-summary{display:grid;grid-template-columns:minmax(0,3fr) minmax(160px,1fr);gap:12px}
.coin-balance-window .coin-total-card{padding:13px 18px;border:1px solid #b4cce8;border-left:5px solid #0865c3;border-radius:6px;background:linear-gradient(110deg,#fff,#e6f2ff);box-shadow:0 2px 5px #254e7810;color:#254b72}
.coin-balance-window .coin-total-card>span,.coin-balance-window .coin-sites-card>span{font-size:12px;font-weight:700}
.coin-balance-window .coin-total-card>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:4px 0}
.coin-balance-window .coin-total-card strong{font-size:clamp(22px,3vw,32px);line-height:1.2;color:#064ca2;letter-spacing:-.5px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.coin-balance-window .coin-unit{font-size:10px;letter-spacing:1px;color:#516e8a}
.coin-balance-window .coin-summary small{display:block;color:#526b80;font-size:11px}
.coin-balance-window .coin-sites-card{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:13px 16px;border:1px solid #acdad5;border-radius:6px;background:#e5f7f3;color:#176556}
.coin-balance-window .coin-sites-card strong{font-size:26px;line-height:1.1}
.coin-balance-window .coin-table-area{min-height:0;overflow:auto;border:1px solid #b9cddd;background:#fff;border-radius:4px}
.coin-balance-window .menu-list-table{width:100%;min-width:660px;table-layout:auto}
.coin-balance-window .menu-list-table th{position:sticky;top:0;background:#dbeafb;color:#244968;font-size:13px;font-weight:600;border-color:#bdd0e1;padding:8px 10px}
.coin-balance-window .menu-list-table td{padding:8px 10px;border-color:#d4e2ec;background:#fff;white-space:nowrap}
.coin-balance-window .menu-list-table tbody tr:nth-child(even) td{background:#edfafb}
.coin-balance-window .menu-list-table th:nth-child(4),.coin-balance-window .menu-list-table td:nth-child(4){text-align:right}
.coin-balance-window .coin-amount{font-weight:700;font-variant-numeric:tabular-nums;color:#126657}
.coin-balance-window .coin-negative{color:#b42318!important}
.coin-balance-window .menu-list-table tbody tr.selected td,.coin-balance-window .menu-list-table tbody tr.selected .coin-amount{background:#0078d7!important;color:#fff!important}
.coin-balance-window .coin-balance-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.coin-balance-window .coin-selection{flex:1;min-width:130px;overflow-wrap:anywhere;font-size:12px;color:#405a72}
.coin-balance-window .coin-buttonbar{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.coin-balance-window .coin-buttonbar button{min-width:76px;min-height:32px;padding:5px 12px;border:1px solid #a6bdce;border-radius:4px;background:#fff;color:#294a66}
.coin-balance-window .coin-buttonbar [data-adjust]{background:#14796b;border-color:#0f685d;color:#fff}
.coin-balance-window .coin-buttonbar [data-history]{background:#0969c3;border-color:#0758a4;color:#fff}
.coin-balance-window .coin-buttonbar button:hover:not(:disabled){filter:brightness(.95)}
.coin-balance-window .coin-buttonbar button:disabled{opacity:.5;cursor:not-allowed}
.coin-balance-window button:focus-visible,.coin-balance-window tr:focus-visible{outline:2px solid #0b58a5;outline-offset:2px}
.coin-balance-window .coin-empty{padding:22px;text-align:center;color:#637a8d}
@media(max-width:650px){.coin-balance-window .coin-summary{grid-template-columns:minmax(0,1fr)}.coin-balance-window .coin-sites-card{flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:8px 12px}.coin-balance-window .coin-sites-card strong{font-size:20px}.coin-balance-window .coin-sites-card small{width:100%}}
.coin-adjust-window{width:500px;height:330px;left:50%;top:50%;transform:translate(-50%,-50%)}
.coin-adjust-window .window-body{padding:16px 18px}
.safe-edit-window{width:min(920px,calc(100vw - 24px));height:min(760px,calc(100vh - 24px));left:50%;top:50%;transform:translate(-50%,-50%)}
.transaction-changes-window{width:min(1250px,calc(100vw - 24px));height:min(760px,calc(100vh - 24px));left:50%;top:50%;transform:translate(-50%,-50%)}
.safe-edit-window .window-body,.transaction-changes-window .window-body{overflow:auto;padding:14px}
.safety-table-wrap{overflow:auto;max-height:310px;margin:8px 0}
.safety-table-wrap .menu-list-table{min-width:700px}
.safety-table-wrap .menu-list-table td{white-space:normal;overflow-wrap:anywhere;min-width:95px}
.safety-table-wrap .menu-list-table tbody tr:nth-child(odd) td{background:#efffff}
.safety-table-wrap .menu-list-table tbody tr.selected td{background:#0786dd;color:#fff}
.safety-note{font-size:12px;color:#444;line-height:1.5}
.safety-status{margin:8px 0;white-space:pre-wrap}
.safety-error{color:#a40000;background:#fff0ed;padding:8px;border:1px solid #ca7777}
.safe-edit-window h3,.transaction-changes-window h3{font-size:15px;margin:12px 0 5px}
.safe-edit-window [data-confirm]{font-weight:700;min-height:32px}
.history-coin-window{width:min(950px,calc(100vw - 30px));height:min(620px,calc(100vh - 50px));left:50%;top:50%;transform:translate(-50%,-50%)}
.history-coin-window .window-body{display:grid;grid-template-rows:42px 34px 1fr 42px;background:#eee;padding:10px 12px}
.history-coin-top{display:flex;align-items:center;gap:10px}
.history-coin-top input{height:25px;border:1px solid #aaa;background:#fff;padding:2px 5px}
.history-coin-top button{height:26px;min-width:74px;border:1px solid #aaa;background:#eee}
.history-coin-site{font-size:16px;display:flex;align-items:center}
.history-coin-grid{background:#bbb;overflow:auto;border:1px solid #999}
.history-coin-grid .menu-list-table{min-width:900px}
.history-coin-grid .menu-list-table tbody tr:nth-child(odd) td{background:#efffff}
.history-coin-grid .menu-list-table tbody tr:nth-child(even) td{background:#fff}
.history-coin-grid .menu-list-table tbody tr.selected td{background:#0786dd!important;color:#fff!important}
.history-coin-bottom{display:flex;justify-content:flex-end;align-items:end}
.history-coin-bottom button{width:74px;height:28px;border:1px solid #aaa;background:#eee}
/* keep date controls compact and aligned */
.tool-row input[type=date]{width:125px}
/* =========================================================
HOTFIX UI v2.1.3 - SALDO BANK
========================================================= */
.has-submenu{
position:relative;
padding-right:30px!important;
}
.has-submenu::after{
content:"▶";
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
font-size:9px;
}
.legacy-submenu{
position:fixed;
z-index:700000!important;
}
/* DAFTAR SALDO */
.bank-balance-window{
width:min(900px,calc(100vw - 40px));
height:550px;
left:50%;
top:50%;
transform:translate(
-50%,
-50%
);
}
.bank-balance-window .window-body{
display:grid;
grid-template-rows:
64px
1fr
42px;
padding:10px;
background:#eee;
}
.bank-balance-header{
display:flex;
align-items:flex-start;
gap:35px;
}
.bank-total{
min-width:245px;
font-size:17px;
padding:8px 10px;
border:1px solid #aaa;
background:#fafafa;
}
.bank-total b{
color:#003b9e;
}
.bank-filter{
display:flex;
gap:18px;
padding-top:11px;
}
.bank-filter label{
display:flex;
align-items:center;
gap:5px;
white-space:nowrap;
}
.bank-balance-table{
overflow:auto;
border:1px solid #999;
background:#aaa;
}
.bank-balance-table
.menu-list-table{
min-width:780px;
}
.bank-balance-table
.menu-list-table th{
background:#f7f7f7;
font-weight:400;
}
.bank-balance-table
.menu-list-table td{
background:#fff;
}
.bank-balance-table
.menu-list-table
tr:nth-child(odd) td{
background:#e9ffff;
}
.bank-balance-table
.menu-list-table
tr.selected td{
background:#0078d7!important;
color:#fff!important;
}
.bank-balance-footer{
display:flex;
justify-content:flex-end;
align-items:flex-end;
}
.bank-balance-footer button{
width:78px;
height:29px;
background:#eee;
border:1px solid #aaa;
}
/* =========================================================
HISTORY REKENING
========================================================= */
.bank-history-window{
width:min(
980px,
calc(100vw - 30px)
);
height:min(
585px,
calc(100vh - 50px)
);
left:50%;
top:50%;
transform:translate(
-50%,
-50%
);
}
.bank-history-window
.window-body{
display:grid;
grid-template-rows:
48px
34px
1fr
42px;
padding:10px 12px;
background:#eee;
}
.bank-history-filter{
display:flex;
align-items:center;
gap:8px;
white-space:nowrap;
}
.bank-history-filter label{
font-size:12px;
}
.bank-history-filter
input{
width:168px;
height:25px;
background:#fff;
border:1px solid #aaa;
padding:2px 4px;
}
.bank-history-filter
button{
min-width:72px;
height:27px;
border:1px solid #aaa;
background:#eee;
}
.bank-history-account{
display:flex;
align-items:center;
font-size:15px;
gap:5px;
}
.bank-history-table{
overflow:auto;
background:#aaa;
border:1px solid #999;
}
.bank-history-table
.menu-list-table{
min-width:920px;
}
.bank-history-table
.menu-list-table th{
background:#f7f7f7;
font-weight:400;
text-align:left;
}
.bank-history-table
.menu-list-table td{
background:#c5c5c5;
}
.bank-history-table
.menu-list-table
tr:nth-child(even) td{
background:#d0d0d0;
}
.bank-history-table
.menu-list-table
tr.selected td{
background:#0078d7;
color:#fff;
}
.bank-history-footer{
display:flex;
align-items:flex-end;
justify-content:flex-end;
}
.bank-history-footer
button{
width:76px;
height:28px;
border:1px solid #aaa;
background:#eee;
}
/* =========================================================
SETTING REKENING - LEGACY v2.1.x
========================================================= */
.setting-account-window{
width:min(
1110px,
calc(100vw - 50px)
);
height:min(
470px,
calc(100vh - 60px)
);
left:50%;
top:50%;
transform:
translate(
-50%,
-50%
);
background:#bfd1e0;
}
.setting-account-window
.window-body{
display:grid;
grid-template-rows:
42px
38px
1fr
52px;
padding:12px;
background:#bfd1e0;
}
/* HEADER BIRU */
.setting-account-title{
display:flex;
align-items:center;
justify-content:center;
background:#98b7d4;
font-size:16px;
margin-bottom:4px;
}
/* FILTER */
.setting-account-filter{
display:flex;
align-items:center;
gap:24px;
padding-left:5px;
}
.setting-account-filter label{
display:flex;
align-items:center;
gap:5px;
white-space:nowrap;
}
.setting-account-filter input{
width:13px;
height:13px;
}
/* AREA TABEL */
.setting-account-table{
min-height:0;
overflow:auto;
background:#aaa;
border:1px solid #777;
}
/* GRID */
.setting-account-grid{
width:100%;
min-width:900px;
border-collapse:
collapse;
background:#fff;
table-layout:
fixed;
font-size:12px;
}
.setting-account-grid th,
.setting-account-grid td{
border:
1px solid #aaa;
height:21px;
padding:
2px 5px;
overflow:hidden;
white-space:nowrap;
text-overflow:clip;
}
.setting-account-grid th{
background:#f7f7f7;
font-weight:400;
text-align:left;
}
/* MARKER */
.setting-account-grid
.setting-account-marker{
width:43px;
text-align:left;
padding-left:5px;
}
/* WIDTH COLUMN */
.setting-account-grid
th:nth-child(2){
width:220px;
}
.setting-account-grid
th:nth-child(3){
width:175px;
}
.setting-account-grid
th:nth-child(4){
width:130px;
}
.setting-account-grid
th:nth-child(5){
width:170px;
}
.setting-account-grid
th:nth-child(6){
width:130px;
}
.setting-account-grid
th:nth-child(7){
width:100px;
}
/* ZEBRA ROW */
.setting-account-grid
tbody tr:nth-child(odd) td{
background:#e9ffff;
}
.setting-account-grid
tbody tr:nth-child(even) td{
background:#fff;
}
/* SELECTED */
.setting-account-grid
tbody tr.selected td{
background:#0078d7!important;
color:#fff!important;
}
.setting-account-grid
tbody tr.selected
.setting-account-marker{
background:#eee!important;
color:#333!important;
}
/* FOOTER */
.setting-account-footer{
display:grid;
grid-template-columns:
82px
1fr
82px
1fr
82px;
align-items:end;
padding-top:9px;
}
.setting-account-footer button{
height:33px;
background:#eee;
border:1px solid #aaa;
}
.setting-account-footer button:disabled{
color:#999;
}
/* PLACEHOLDER SPACER */
.setting-account-footer-spacer{
min-width:10px;
}
/* =========================================================
ADD / EDIT REKENING LEGACY
========================================================= */
.account-form-window{
width:390px;
height:405px;
left:50%;
top:50%;
transform:
translate(
-50%,
-50%
);
background:#bfd1e0;
}
.account-form-window
.window-body{
padding:
20px 20px;
background:#bfd1e0;
}
.account-form-grid{
display:grid;
grid-template-columns:
105px
1fr;
column-gap:12px;
row-gap:11px;
align-items:center;
}
.account-form-grid label{
font-size:14px;
white-space:nowrap;
}
.account-form-grid input,
.account-form-grid select{
width:100%;
height:25px;
border:
1px solid #999;
background:#fff;
padding:
2px 5px;
}
/* BANK + BUTTON PLUS */
.account-bank-field{
display:grid;
grid-template-columns:
1fr
25px;
gap:7px;
align-items:center;
}
.account-bank-field select{
min-width:0;
}
.account-add-bank{
width:25px!important;
min-width:25px!important;
height:25px!important;
padding:0!important;
border:
2px solid #0078d7!important;
background:#eee!important;
color:#000;
font-size:19px;
line-height:18px;
text-align:center;
}
/* BUTTON SIMPAN/TUTUP */
.account-form-buttons{
display:flex;
justify-content:center;
gap:12px;
margin-top:35px;
}
.account-form-buttons button{
width:109px;
height:45px;
background:#eee;
border:
1px solid #aaa;
font-size:14px;
}
/* =========================================================
QUICK ADD BANK
========================================================= */
.quick-bank-window{
width:470px;
height:95px;
left:50%;
top:50%;
transform:
translate(
-50%,
-50%
);
background:#eee;
z-index:760000!important;
}
.quick-bank-window
.window-body{
padding:
14px 12px;
background:#eee;
overflow:hidden;
}
.quick-bank-row{
display:grid;
grid-template-columns:
105px
1fr
72px
72px;
gap:9px;
align-items:center;
}
.quick-bank-row label{
white-space:nowrap;
}
.quick-bank-row input{
height:26px;
border:
1px solid #0078d7;
background:#fff;
padding:
2px 5px;
}
.quick-bank-row button{
height:28px;
border:
1px solid #aaa;
background:#eee;
}
/* =========================================================
SETTING SITENAME - LEGACY
========================================================= */
.setting-site-window{
width:545px;
height:520px;
left:50%;
top:50%;
transform:
translate(
-50%,
-50%
);
background:#bfd1e0;
}
.setting-site-window
.window-body{
display:grid;
grid-template-rows:
43px
1fr
54px;
padding:12px;
background:#bfd1e0;
}
/* =========================================================
HEADER BIRU
========================================================= */
.setting-site-title{
display:flex;
align-items:center;
justify-content:center;
background:#98b7d4;
font-size:17px;
margin-bottom:4px;
}
/* =========================================================
TABLE AREA
========================================================= */
.setting-site-table{
min-height:0;
overflow:auto;
background:#aaa;
border:1px solid #777;
}
.setting-site-grid{
width:100%;
min-width:620px;
border-collapse:
collapse;
table-layout:
fixed;
background:#fff;
font-size:13px;
}
.setting-site-grid th,
.setting-site-grid td{
height:22px;
border:
1px solid #aaa;
padding:
2px 6px;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
}
.setting-site-grid th{
background:#f8f8f8;
font-weight:400;
text-align:left;
font-size:14px;
}
/* =========================================================
COLUMN WIDTH
========================================================= */
.setting-site-grid
.setting-site-marker{
width:50px;
padding-left:5px;
}
.setting-site-grid
th:nth-child(2){
width:200px;
}
.setting-site-grid
th:nth-child(3){
width:260px;
}
.setting-site-grid
th:nth-child(4){
width:120px;
}
/* =========================================================
ROW COLORS
========================================================= */
.setting-site-grid
tbody tr:nth-child(odd) td{
background:#e9ffff;
}
.setting-site-grid
tbody tr:nth-child(even) td{
background:#fff;
}
.setting-site-grid
tbody tr.selected td{
background:#0078d7!important;
color:#fff!important;
}
.setting-site-grid
tbody tr.selected
.setting-site-marker{
background:#eee!important;
color:#333!important;
}
/* =========================================================
FOOTER BUTTON
========================================================= */
.setting-site-footer{
display:grid;
grid-template-columns:
96px
1fr
96px
1fr
96px;
align-items:end;
padding-top:10px;
}
.setting-site-footer button{
height:34px;
background:#eee;
border:
1px solid #aaa;
font-size:13px;
}
.setting-site-footer button:disabled{
color:#999;
}
.setting-site-spacer{
min-width:10px;
}
/* =========================================================
ADD / EDIT SITENAME - LEGACY
========================================================= */
.site-form-window{
width:400px;
height:275px;
left:50%;
top:50%;
transform:
translate(
-50%,
-50%
);
background:#bfd1e0;
}
.site-form-window
.window-body{
padding:
21px 26px;
background:#bfd1e0;
overflow:hidden;
}
/* =========================================================
FORM GRID
========================================================= */
.site-form-grid{
display:grid;
grid-template-columns:
105px
1fr;
column-gap:10px;
row-gap:13px;
align-items:center;
}
.site-form-grid > label:not(.site-coin-checkbox){
font-size:16px;
font-weight:600;
white-space:nowrap;
}
.site-form-grid input[type="text"]{
width:100%;
height:27px;
border:
1px solid #999;
background:#fff;
padding:
2px 5px;
font-size:14px;
}
/* =========================================================
COIN SYSTEM CHECKBOX
========================================================= */
.site-coin-checkbox{
display:flex;
align-items:center;
gap:6px;
font-size:12px!important;
font-weight:400!important;
}
.site-coin-checkbox input{
width:14px;
height:14px;
margin:0;
}
.site-coin-label{
margin-top:2px;
}
/* DISABLED COIN */
.site-form-grid
input[name="coin"]:disabled{
background:#f2f2f2;
color:#777;
}
/* =========================================================
BUTTON
========================================================= */
.site-form-buttons{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:20px;
}
.site-form-buttons button{
width:109px;
height:45px;
border:
1px solid #aaa;
background:#eee;
font-size:16px;
font-weight:700;
}
/* =========================================================
SETTING BONUS - LEGACY
========================================================= */
.setting-bonus-window{
width:580px;
height:480px;
left:50%;
top:50%;
transform:
translate(
-50%,
-50%
);
background:#bfd1e0;
}
.setting-bonus-window
.window-body{
display:grid;
grid-template-rows:
43px
1fr
55px;
padding:12px;
background:#bfd1e0;
}
/* =========================================================
TITLE
========================================================= */
.setting-bonus-title{
display:flex;
align-items:center;
justify-content:center;
background:#98b7d4;
font-size:17px;
margin-bottom:4px;
}
/* =========================================================
TABLE
========================================================= */
.setting-bonus-table{
min-height:0;
overflow:auto;
background:#aaa;
border:1px solid #777;
}
.setting-bonus-grid{
width:100%;
border-collapse:
collapse;
table-layout:
fixed;
background:#fff;
font-size:13px;
}
.setting-bonus-grid th,
.setting-bonus-grid td{
border:
1px solid #aaa;
height:22px;
padding:
2px 6px;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
}
.setting-bonus-grid th{
background:#f8f8f8;
font-weight:400;
text-align:left;
font-size:14px;
}
/* MARKER */
.setting-bonus-grid
.setting-bonus-marker{
width:50px;
padding-left:5px;
}
/* COLUMN */
.setting-bonus-grid
th:nth-child(2){
width:150px;
}
.setting-bonus-grid
th:nth-child(3){
width:200px;
}
.setting-bonus-grid
th:nth-child(4){
width:140px;
}
/* ROW */
.setting-bonus-grid
tbody tr:nth-child(odd) td{
background:#e9ffff;
}
.setting-bonus-grid
tbody tr:nth-child(even) td{
background:#fff;
}
.setting-bonus-grid
tbody tr.selected td{
background:#0078d7!important;
color:#fff!important;
}
.setting-bonus-grid
tbody tr.selected
.setting-bonus-marker{
background:#eee!important;
color:#333!important;
}
/* =========================================================
FOOTER
========================================================= */
.setting-bonus-footer{
display:grid;
grid-template-columns:
96px
1fr
96px
1fr
96px;
align-items:end;
padding-top:10px;
}
.setting-bonus-footer button{
height:36px;
background:#eee;
border:1px solid #aaa;
font-size:13px;
}
.setting-bonus-footer button:disabled{
color:#999;
}
.setting-bonus-spacer{
min-width:10px;
}
/* =========================================================
ADD / EDIT BONUS
========================================================= */
.bonus-form-window{
width:390px;
height:350px;
left:50%;
top:50%;
transform:
translate(
-50%,
-50%
);
background:#bfd1e0;
}
.bonus-form-window
.window-body{
padding:
22px 24px;
background:#bfd1e0;
overflow:hidden;
}
/* FORM */
.bonus-form-grid{
display:grid;
grid-template-columns:
120px
1fr;
column-gap:10px;
row-gap:13px;
align-items:center;
}
.bonus-form-grid > label{
font-size:16px;
font-weight:600;
white-space:nowrap;
}
.bonus-form-grid
input,
.bonus-form-grid
select{
width:100%;
height:27px;
border:
1px solid #999;
background:#fff;
padding:
2px 5px;
font-size:14px;
}
/* PERCENTAGE */
.bonus-percentage-field{
display:grid;
grid-template-columns:
1fr
28px;
gap:6px;
align-items:center;
}
.bonus-percentage-field span{
font-size:17px;
font-weight:700;
}
/* DISABLED */
.bonus-form-grid
input:disabled{
background:#eee;
color:#777;
}
/* BUTTON */
.bonus-form-buttons{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:22px;
}
.bonus-form-buttons button{
width:109px;
height:45px;
border:
1px solid #aaa;
background:#eee;
font-size:16px;
font-weight:700;
}
/* =========================================================
SETTING OPERATOR - LEGACY
========================================================= */
.setting-operator-window{
width:690px;
height:470px;
left:50%;
top:50%;
transform:
translate(
-50%,
-50%
);
background:#bfd1e0;
}
.setting-operator-window
.window-body{
display:grid;
grid-template-rows:
43px
1fr
55px;
padding:12px;
background:#bfd1e0;
}
/* HEADER */
.setting-operator-title{
display:flex;
align-items:center;
justify-content:center;
background:#98b7d4;
font-size:17px;
margin-bottom:4px;
}
/* TABLE AREA */
.setting-operator-table{
min-height:0;
overflow:auto;
background:#aaa;
border:1px solid #777;
}
/* GRID */
.setting-operator-grid{
width:100%;
min-width:640px;
border-collapse:
collapse;
table-layout:
fixed;
background:#fff;
font-size:13px;
}
.setting-operator-grid th,
.setting-operator-grid td{
height:22px;
border:
1px solid #aaa;
padding:
2px 6px;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
}
.setting-operator-grid th{
background:#f8f8f8;
font-weight:400;
text-align:left;
font-size:14px;
}
/* MARKER */
.setting-operator-grid
.setting-operator-marker{
width:43px;
padding-left:5px;
}
/* COLUMN */
.setting-operator-grid
th:nth-child(2){
width:150px;
}
.setting-operator-grid
th:nth-child(3){
width:150px;
}
.setting-operator-grid
th:nth-child(4){
width:150px;
}
/* ROW COLOR */
.setting-operator-grid
tbody tr:nth-child(odd) td{
background:#e9ffff;
}
.setting-operator-grid
tbody tr:nth-child(even) td{
background:#fff;
}
.setting-operator-grid
tbody tr.selected td{
background:#0078d7!important;
color:#fff!important;
}
.setting-operator-grid
tbody tr.selected
.setting-operator-marker{
background:#eee!important;
color:#333!important;
}
/* FOOTER */
.setting-operator-footer{
display:grid;
grid-template-columns:
96px
1fr
96px
1fr
96px;
align-items:end;
padding-top:10px;
}
.setting-operator-footer button{
height:37px;
border:
1px solid #aaa;
background:#eee;
font-size:13px;
}
.setting-operator-footer
button:disabled{
color:#999;
}
.setting-operator-spacer{
min-width:10px;
}
/* =========================================================
TAMBAH / EDIT OPERATOR
========================================================= */
.operator-form-window{
width:455px;
height:min(640px,calc(100vh - 24px));
left:50%;
top:50%;
transform:
translate(
-50%,
-50%
);
background:#bfd1e0;
}
.operator-form-window
.window-body{
padding:
17px 16px;
background:#bfd1e0;
overflow:auto;
}
/* BASIC FORM */
.operator-form-grid{
display:grid;
grid-template-columns:
125px
16px
1fr;
column-gap:5px;
row-gap:8px;
align-items:center;
}
.operator-form-grid label{
font-size:14px;
white-space:nowrap;
}
.operator-colon{
text-align:center;
}
.operator-form-grid
input,
.operator-form-grid
select{
width:100%;
height:25px;
border:
1px solid #999;
background:#fff;
padding:
2px 5px;
}
/* =========================================================
ACCESSIBILITY
========================================================= */
.operator-access-box{
margin-top:16px;
padding:
18px 10px
12px 10px;
border:
1px solid #dfe8ef;
box-shadow:
inset 0 0 0 1px #9eafbd;
}
.operator-access-box legend{
padding:
0 5px;
font-size:15px;
}
.operator-access-grid{
display:grid;
grid-template-columns:
1fr
1fr;
column-gap:25px;
row-gap:8px;
}
.operator-access-item{
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
font-size:13px;
}
.operator-access-item input{
width:14px;
height:14px;
margin:0;
}
/* =========================================================
BUTTON
========================================================= */
.operator-form-buttons{
display:flex;
justify-content:flex-end;
gap:18px;
margin-top:12px;
}
.operator-form-buttons button{
width:74px;
height:31px;
background:#eee;
border:
1px solid #aaa;
font-size:13px;
}
/* =========================================================
DEFAULT DEPO MASSAL
========================================================= */
.default-depo-massal-window{
width:660px;
height:200px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:#efefef;
}
.default-depo-massal-window .window-body{
padding:18px 18px 14px 18px;
background:#efefef;
overflow:hidden;
}
.default-depo-massal-form{
display:flex;
flex-direction:column;
gap:18px;
}
.default-depo-row{
display:grid;
grid-template-columns:170px 18px 1fr;
align-items:center;
column-gap:8px;
}
.default-depo-row label{
font-size:14px;
white-space:nowrap;
}
.default-depo-colon{
text-align:center;
}
.default-depo-row select{
height:28px;
border:1px solid #a7a7a7;
background:#fff;
padding:2px 6px;
font-size:14px;
}
.default-depo-actions{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:8px;
padding-left:4px;
padding-right:4px;
}
.default-depo-actions button{
min-width:74px;
height:34px;
border:1px solid #8f8f8f;
background:#f4f4f4;
font-size:14px;
cursor:pointer;
}
/* =========================================================
SETTING GROUP - LEGACY
========================================================= */
.setting-group-window{
width:690px;
height:480px;
left:50%;
top:50%;
transform:
translate(
-50%,
-50%
);
background:#bfd1e0;
}
.setting-group-window
.window-body{
display:grid;
grid-template-rows:
43px
1fr
55px;
padding:12px;
background:#bfd1e0;
}
/* =========================================================
HEADER
========================================================= */
.setting-group-title{
display:flex;
align-items:center;
justify-content:center;
background:#98b7d4;
font-size:18px;
margin-bottom:4px;
}
/* =========================================================
TABLE
========================================================= */
.setting-group-table{
min-height:0;
overflow:auto;
background:#aaa;
border:1px solid #777;
}
.setting-group-grid{
width:100%;
min-width:700px;
border-collapse:
collapse;
table-layout:
fixed;
background:#fff;
font-size:13px;
}
.setting-group-grid th,
.setting-group-grid td{
height:23px;
border:
1px solid #aaa;
padding:
2px 6px;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
}
.setting-group-grid th{
background:#f8f8f8;
font-weight:400;
text-align:left;
font-size:15px;
}
/* =========================================================
COLUMN
========================================================= */
.setting-group-grid
.setting-group-marker{
width:42px;
padding-left:5px;
}
.setting-group-grid
th:nth-child(2){
width:200px;
}
.setting-group-grid
th:nth-child(3){
width:410px;
}
/* =========================================================
ROW
========================================================= */
.setting-group-grid
tbody tr:nth-child(odd) td{
background:#e9ffff;
}
.setting-group-grid
tbody tr:nth-child(even) td{
background:#fff;
}
.setting-group-grid
tbody tr.selected td{
background:#0078d7!important;
color:#fff!important;
}
.setting-group-grid
tbody tr.selected
.setting-group-marker{
background:#eee!important;
color:#333!important;
}
/* =========================================================
FOOTER
========================================================= */
.setting-group-footer{
display:grid;
grid-template-columns:
96px
1fr
96px
1fr
96px;
align-items:end;
padding-top:10px;
}
.setting-group-footer button{
height:37px;
border:
1px solid #aaa;
background:#eee;
font-size:14px;
}
.setting-group-footer button:disabled{
color:#999;
}
.setting-group-spacer{
min-width:10px;
}
/* =========================================================
TAMBAH / EDIT GROUP
========================================================= */
.group-form-window{
width:400px;
height:200px;
left:50%;
top:50%;
transform:
translate(
-50%,
-50%
);
background:#bfd1e0;
}
.group-form-window
.window-body{
padding:
22px 18px;
background:#bfd1e0;
overflow:hidden;
}
.group-form-grid{
display:grid;
grid-template-columns:
95px
1fr;
column-gap:12px;
row-gap:13px;
align-items:center;
}
.group-form-grid label{
font-size:17px;
font-weight:600;
white-space:nowrap;
}
.group-form-grid input{
width:100%;
height:27px;
border:
1px solid #999;
background:#fff;
padding:
2px 5px;
font-size:14px;
}
/* =========================================================
BUTTON
========================================================= */
.group-form-buttons{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:17px;
}
.group-form-buttons button{
width:109px;
height:45px;
border:
1px solid #aaa;
background:#eee;
font-size:16px;
font-weight:700;
}
/* =========================================================
TAMBAH / EDIT MEMBER - LEGACY
========================================================= */
.member-form-window{
width:445px;
height:402px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:#bfd1e0;
}
.member-form-window .window-body{
padding:12px 25px 10px;
overflow:hidden;
background:#bfd1e0;
}
.member-form{
height:100%;
}
.member-form-grid{
display:grid;
grid-template-columns:112px 1fr;
align-items:center;
column-gap:11px;
row-gap:6px;
}
.member-form-grid label{
font-size:13px;
white-space:nowrap;
}
.member-form-grid input,
.member-form-grid select{
width:100%;
height:24px;
min-height:24px;
border:1px solid #999;
border-radius:0;
background:#fff;
padding:2px 4px;
font-size:13px;
}
.member-form-actions{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:15px;
}
.member-form-actions button{
width:74px;
height:32px;
border:1px solid #aaa;
border-radius:0;
background:#eee;
}
.member-form-converter-row{
display:flex;
justify-content:center;
margin-top:23px;
}
.member-form-converter-row button{
width:119px;
height:39px;
border:1px solid #aaa;
border-radius:0;
background:#eee;
}
.member-converter-window{
width:386px;
height:378px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:#bfd1e0;
}
.member-converter-window .window-body{
padding:12px 13px 10px;
overflow:hidden;
background:#bfd1e0;
}
.member-converter-form{
display:grid;
grid-template-rows:auto 1fr auto;
height:100%;
}
.member-converter-types{
display:flex;
align-items:center;
gap:18px;
min-height:29px;
}
.member-converter-types label{
display:flex;
align-items:center;
gap:5px;
font-size:13px;
}
.member-converter-form textarea{
width:100%;
min-height:0;
resize:none;
border:1px solid #1676d2;
border-radius:0;
background:#fff;
padding:5px;
font:13px Arial,sans-serif;
}
.member-converter-actions{
display:flex;
justify-content:space-between;
align-items:end;
padding-top:9px;
}
.member-converter-actions button{
min-width:74px;
height:22px;
border:1px solid #aaa;
border-radius:0;
background:#eee;
}
/* =========================================================
SALDO BANK - LEGACY WINDOWS
========================================================= */
.fund-transfer-window{
width:515px;
height:253px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:#bfd1e0;
}
.fund-transfer-window .window-body{
padding:22px 16px 10px;
overflow:hidden;
background:#bfd1e0;
}
.fund-transfer-grid{
display:grid;
grid-template-columns:102px 1fr;
align-items:center;
column-gap:8px;
row-gap:8px;
}
.fund-transfer-grid input,
.fund-transfer-grid select{
width:100%;
height:24px;
border:1px solid #999;
border-radius:0;
background:#fff;
padding:2px 4px;
}
.fund-transfer-grid select:disabled{
background:#d6d6d6;
color:#777;
}
.fund-transfer-actions{
display:flex;
justify-content:space-between;
margin-top:18px;
}
.fund-transfer-actions button{
width:74px;
height:31px;
border:1px solid #aaa;
border-radius:0;
background:#eee;
}
.cash-adjust-window{
width:423px;
height:506px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:#bfd1e0;
}
.cash-adjust-window .window-body{
padding:18px 12px 10px;
overflow:hidden;
background:#bfd1e0;
}
.cash-account-box,
.cash-entry-box{
border:1px solid rgba(255,255,255,.65);
margin:0;
}
.cash-account-box{
height:88px;
padding:18px 12px 10px 25px;
}
.cash-account-row{
display:grid;
grid-template-columns:104px 14px 1fr;
align-items:center;
margin-bottom:12px;
}
.cash-account-row select{
width:100%;
height:23px;
border:1px solid #aaa;
background:#d6d6d6;
color:#777;
}
.cash-account-row b{
font-size:14px;
font-weight:500;
}
.cash-entry-box{
height:295px;
margin-top:12px;
padding:24px 13px 14px;
}
.cash-direction-row{
display:flex;
justify-content:center;
gap:64px;
margin-bottom:27px;
font-size:14px;
}
.cash-direction-row label{
display:flex;
align-items:center;
gap:5px;
}
.cash-entry-grid{
display:grid;
grid-template-columns:100px 1fr;
align-items:start;
column-gap:12px;
row-gap:17px;
}
.cash-entry-grid>label{
padding-top:5px;
}
.cash-entry-grid input{
width:100%;
height:24px;
border:1px solid #999;
text-align:right;
padding:2px 4px;
}
.cash-entry-grid textarea{
width:100%;
height:166px;
border:1px solid #999;
resize:none;
padding:4px;
}
.cash-adjust-actions{
display:flex;
justify-content:space-between;
margin-top:20px;
}
.cash-adjust-actions button{
width:73px;
height:33px;
border:1px solid #aaa;
border-radius:0;
background:#eee;
}
.history-bank-legacy-window{
width:min(1120px,calc(100vw - 16px));
height:min(625px,calc(100vh - 20px));
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.history-bank-legacy-window .window-body{
display:grid;
grid-template-rows:56px 40px 1fr;
padding:12px 0 0;
overflow:hidden;
background:#eee;
}
.history-bank-legacy-filter{
display:flex;
align-items:center;
gap:8px;
padding:0 17px;
white-space:nowrap;
}
.history-bank-legacy-filter label{
font-size:16px;
}
.history-bank-legacy-filter input{
width:150px;
height:24px;
border:1px solid #999;
background:#fff;
}
.history-bank-legacy-filter button{
height:25px;
border:1px solid #aaa;
background:#eee;
}
.history-bank-legacy-filter [data-search]{
width:74px;
margin-left:9px;
}
.history-bank-legacy-filter [data-export]{
width:151px;
margin-left:13px;
}
.history-bank-legacy-account{
padding:3px 17px 8px;
font-size:16px;
}
.history-bank-legacy-table,
.bank-log-table{
min-height:0;
overflow:auto;
border:1px solid #777;
background:#aaa;
}
.history-bank-legacy-table .menu-list-table,
.bank-log-table .menu-list-table{
min-width:100%;
table-layout:auto;
font-size:14px;
}
.history-bank-legacy-table .menu-list-table{
width:1220px;
min-width:1220px;
}
.history-bank-legacy-table .menu-list-table th,
.history-bank-legacy-table .menu-list-table td{
box-sizing:border-box;
}
.history-bank-legacy-table .menu-list-table th:nth-child(2),
.history-bank-legacy-table .menu-list-table td:nth-child(2){width:150px;min-width:150px}
.history-bank-legacy-table .menu-list-table th:nth-child(3),
.history-bank-legacy-table .menu-list-table td:nth-child(3){width:120px;min-width:120px}
.history-bank-legacy-table .menu-list-table th:nth-child(4),
.history-bank-legacy-table .menu-list-table td:nth-child(4){width:150px;min-width:150px}
.history-bank-legacy-table .menu-list-table th:nth-child(5),
.history-bank-legacy-table .menu-list-table td:nth-child(5){width:200px;min-width:200px}
.history-bank-legacy-table .menu-list-table th:nth-child(6),
.history-bank-legacy-table .menu-list-table td:nth-child(6),
.history-bank-legacy-table .menu-list-table th:nth-child(7),
.history-bank-legacy-table .menu-list-table td:nth-child(7){width:150px;min-width:150px}
.history-bank-legacy-table .menu-list-table th:nth-child(8),
.history-bank-legacy-table .menu-list-table td:nth-child(8),
.history-bank-legacy-table .menu-list-table th:nth-child(9),
.history-bank-legacy-table .menu-list-table td:nth-child(9){width:125px;min-width:125px}
.history-bank-legacy-table .menu-list-table th,
.history-bank-legacy-table .menu-list-table td,
.bank-log-table .menu-list-table th,
.bank-log-table .menu-list-table td{
height:22px;
padding:2px 6px;
border:1px solid #aaa;
white-space:nowrap;
}
.history-bank-legacy-table .menu-list-table th,
.bank-log-table .menu-list-table th{
background:#fff;
font-weight:400;
}
.history-bank-legacy-table .menu-list-table td{
background:#efffff;
}
.history-bank-legacy-table .menu-list-table tr:nth-child(even) td{
background:#fff;
}
.history-bank-legacy-table .menu-list-table tr.selected td,
.bank-log-table .menu-list-table tr.selected td{
background:#0786dd!important;
color:#fff!important;
}
.history-bank-legacy-table .menu-list-table th:first-child,
.history-bank-legacy-table .menu-list-table td:first-child{
width:50px;
min-width:50px;
background:#eee;
}
.history-bank-legacy-table .menu-list-table tr.selected td:first-child::after{
content:"▶";
color:#555;
}
.history-bank-legacy-table .menu-list-table tr.selected td:first-child{
background:#eee!important;
color:#555!important;
}
.history-bank-legacy-window .window-close{
background:#d75a4e;
color:#ffffff;
}
.history-bank-legacy-window .window-close:hover{
background:#d33829;
}
.bank-log-legacy-window{
width:min(1070px,calc(100vw - 16px));
height:min(708px,calc(100vh - 20px));
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:#bfd1e0;
}
.bank-log-legacy-window .window-body{
display:grid;
grid-template-rows:125px 1fr 66px;
padding:0 12px 10px;
overflow:hidden;
background:#bfd1e0;
}
.bank-log-toolbar{
display:grid;
grid-template-columns:290px 315px 1fr;
align-items:center;
gap:16px;
}
.bank-log-filter-box,
.bank-log-date-box{
height:89px;
border:1px solid rgba(255,255,255,.68);
padding:22px 14px 10px;
}
.bank-log-filter-box legend,
.bank-log-date-box legend{
font-size:16px;
}
.bank-log-filter-box select{
width:100%;
height:28px;
border:1px solid #aaa;
background:#fff;
}
.bank-log-date-box{
padding-top:12px;
}
.bank-log-date-box>div{
display:grid;
grid-template-columns:96px 1fr;
align-items:center;
margin-bottom:7px;
}
.bank-log-date-box input{
width:175px;
height:22px;
border:1px solid #999;
background:#fff;
}
.bank-log-toolbar-actions{
display:flex;
justify-content:flex-end;
gap:26px;
}
.bank-log-toolbar-actions button{
min-width:74px;
height:39px;
border:1px solid #aaa;
background:#eee;
font-size:15px;
}
.bank-log-toolbar-actions [data-export]{
width:140px;
}
.bank-log-table .menu-list-table td{
background:#c2c2c2;
}
.bank-log-footer{
display:flex;
justify-content:flex-end;
align-items:flex-end;
}
.bank-log-footer button{
width:106px;
height:46px;
border:1px solid #aaa;
background:#eee;
font-size:14px;
}
/* =========================================================
HISTORY TRANSAKSI - LEGACY
========================================================= */
.history-transactions-legacy-window{
width:min(1490px,calc(100vw - 12px));
height:min(890px,calc(100vh - 18px));
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.history-transactions-legacy-window .window-body{
display:grid;
grid-template-rows:165px minmax(220px,1fr) 255px;
overflow:hidden;
background:#eee;
}
.history-transactions-toolbar{
position:relative;
display:grid;
grid-template-columns:172px minmax(620px,1fr) 370px;
gap:27px;
align-items:start;
padding:18px 12px 6px;
}
.history-kind-panel{
position:relative;
display:flex;
flex-direction:column;
gap:9px;
height:110px;
padding:12px 10px;
border:1px solid #ddd;
font-size:17px;
}
.history-kind-panel>label{
display:flex;
align-items:center;
gap:6px;
white-space:nowrap;
}
.history-kind-panel .history-bonus-check{
position:absolute;
left:0;
bottom:-27px;
font-size:11px;
}
.history-filter-panel{
min-width:0;
height:120px;
margin:0;
padding:10px 16px;
border:1px solid #ddd;
}
.history-filter-panel legend{
font-size:14px;
}
.history-filter-row{
display:grid;
grid-template-columns:112px 242px;
align-items:center;
min-height:29px;
}
.history-date-row{
grid-template-columns:112px 140px 20px 140px 98px minmax(130px,1fr);
gap:8px;
}
.history-options-row{
grid-template-columns:112px 316px 98px minmax(130px,1fr);
gap:8px;
}
.history-options-row>:nth-child(2){
width:min(242px,100%);
}
.history-filter-row label{
display:flex;
align-items:center;
gap:6px;
font-size:16px;
white-space:nowrap;
}
.history-filter-row input:not([type=checkbox]),
.history-filter-row select{
height:25px;
min-width:0;
border:1px solid #999;
background:#fff;
padding:2px 4px;
}
.history-filter-row input:disabled,
.history-filter-row select:disabled{
background:#e5e5e5;
color:#555;
}
.history-main-actions{
display:flex;
justify-content:space-between;
padding-top:15px;
}
.history-main-actions button{
height:80px;
border:1px solid #aaa;
background:#eee;
font-size:19px;
}
.history-main-actions [data-search]{
width:106px;
}
.history-main-actions [data-export]{
width:161px;
}
.history-sort-row{
position:absolute;
left:212px;
bottom:4px;
display:flex;
align-items:center;
gap:10px;
}
.history-sort-row select{
width:164px;
height:23px;
border:1px solid #aaa;
background:#eee;
}
.history-transactions-table{
min-height:0;
overflow:auto;
border:1px solid #777;
background:#aaa;
}
.history-transactions-table .menu-list-table{
min-width:1450px;
width:100%;
table-layout:auto;
font-size:14px;
}
.history-transactions-table .menu-list-table th,
.history-transactions-table .menu-list-table td{
height:22px;
padding:2px 6px;
border:1px solid #aaa;
white-space:nowrap;
}
.history-transactions-table .menu-list-table th{
background:#fff;
font-size:16px;
font-weight:400;
}
.history-transactions-table .menu-list-table td{
background:#efffff;
}
.history-transactions-table .menu-list-table tr:nth-child(even) td{
background:#fff;
}
.history-transactions-table .menu-list-table tr.selected td{
background:#0786dd!important;
color:#fff!important;
}
.history-transactions-table .menu-list-table th:first-child,
.history-transactions-table .menu-list-table td:first-child{
width:50px;
min-width:50px;
background:#eee;
}
.history-transactions-table .menu-list-table tr.selected td:first-child::after{
content:"▶";
}
.history-bank-legacy-window .history-bank-legacy-table button.history-header-sort-button,
.history-transactions-legacy-window .history-transactions-table button.history-header-sort-button{
display:block;
position:relative;
width:100%;
padding:0 14px 0 0;
border:0;
background:transparent;
color:inherit;
font:inherit;
white-space:nowrap;
text-align:left;
cursor:pointer;
}
.history-bank-legacy-window .history-bank-legacy-table button.history-header-sort-button:active:not(:disabled),
.history-transactions-legacy-window .history-transactions-table button.history-header-sort-button:active:not(:disabled){
border:0;
background:transparent;
}
.history-bank-legacy-window .history-bank-legacy-table button.history-header-sort-button:hover,
.history-transactions-legacy-window .history-transactions-table button.history-header-sort-button:hover{
color:#0759a1;
}
.history-bank-legacy-window .history-bank-legacy-table button.history-header-sort-button:focus-visible,
.history-transactions-legacy-window .history-transactions-table button.history-header-sort-button:focus-visible{
outline:2px solid #1679ca;
outline-offset:2px;
}
.history-header-sort-button::after{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
color:#777;
}
.history-header-sort-button[data-direction="asc"]::after{
content:"▲";
font-size:9px;
}
.history-header-sort-button[data-direction="desc"]::after{
content:"▼";
font-size:9px;
}
.history-summary-panel{
display:grid;
grid-template-columns:1fr 1fr;
gap:55px;
padding:15px 18px 10px;
background:#eee;
font-size:20px;
}
.history-summary-column{
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
}
.history-summary-column div{
min-width:460px;
text-align:left;
}
.history-summary-column b{
font-weight:400;
}
@media(max-width:1320px){
.history-transactions-legacy-window .window-body{
grid-template-rows:185px minmax(220px,1fr) 255px;
}
.history-transactions-toolbar{
grid-template-columns:172px 688px 370px;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:20px;
}
.history-sort-row{bottom:18px}
}
@media(max-width:1100px){
.history-transactions-toolbar{
grid-template-columns:160px 688px 300px;
}
.history-main-actions [data-export]{width:150px}
.history-summary-panel{font-size:17px}
.history-summary-column div{min-width:390px}
}
/* =========================================================
BLACKLIST REKENING - LEGACY
========================================================= */
.blacklist-legacy-window{
width:min(935px,calc(100vw - 16px));
height:min(616px,calc(100vh - 20px));
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.blacklist-legacy-window .window-body{
display:grid;
grid-template-rows:62px 39px minmax(250px,1fr) 67px;
padding:0 11px;
overflow:hidden;
background:#eee;
}
.blacklist-legacy-heading{
display:flex;
align-items:center;
justify-content:center;
margin:12px 0 0;
background:#9dbbd8;
font-size:17px;
}
.blacklist-legacy-filter{
display:grid;
grid-template-columns:58px 165px 270px;
gap:9px;
align-items:center;
padding-left:21px;
font-size:16px;
}
.blacklist-legacy-filter select,
.blacklist-legacy-filter input{
width:100%;
height:28px;
border:1px solid #aaa;
background:#fff;
padding:2px 6px;
}
.blacklist-legacy-filter select{
background:#eee;
}
.blacklist-legacy-table{
min-height:0;
overflow:auto;
border:1px solid #888;
background:#bbb;
}
.blacklist-legacy-table .menu-list-table{
width:100%;
min-width:800px;
table-layout:fixed;
font-size:13px;
}
.blacklist-legacy-table .menu-list-table th,
.blacklist-legacy-table .menu-list-table td{
height:20px;
padding:1px 7px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
border:1px solid #eee;
}
.blacklist-legacy-table .menu-list-table th{
background:#fff;
font-size:14px;
font-weight:400;
}
.blacklist-legacy-table .menu-list-table td{
background:#c2c2c2;
}
.blacklist-legacy-table .menu-list-table th:nth-child(1){width:33%}
.blacklist-legacy-table .menu-list-table th:nth-child(2){width:16.5%}
.blacklist-legacy-table .menu-list-table th:nth-child(3){width:16.5%}
.blacklist-legacy-table .menu-list-table th:nth-child(4){width:34%}
.blacklist-legacy-table .menu-list-table tr.selected td{
background:#0786dd!important;
color:#fff!important;
}
.blacklist-legacy-table .blacklist-filler{
pointer-events:none;
}
.blacklist-legacy-footer{
display:grid;
grid-template-columns:1fr 1fr 1fr;
align-items:end;
padding:0 0 14px;
}
.blacklist-legacy-footer button{
width:97px;
height:37px;
border:1px solid #aaa;
background:#eee;
font-size:14px;
}
.blacklist-legacy-footer [data-add]{justify-self:start}
.blacklist-legacy-footer [data-delete]{justify-self:center}
.blacklist-legacy-footer [data-close]{justify-self:end}
/* =========================================================
DP GANTUNG - LEGACY
========================================================= */
.deposit-pending-legacy-window{
width:min(810px,calc(100vw - 16px));
height:min(660px,calc(100vh - 20px));
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.deposit-pending-legacy-window .window-body{
display:grid;
grid-template-rows:68px 48px minmax(260px,1fr) 64px;
gap:0;
padding:14px 11px 0;
overflow:hidden;
background:#eee;
}
.deposit-pending-total{
display:flex;
align-items:center;
justify-content:center;
background:#9dbbd8;
font-size:17px;
}
.deposit-pending-status{
display:flex;
align-items:center;
gap:16px;
padding-left:7px;
font-size:14px;
}
.deposit-pending-status label{
display:flex;
align-items:center;
gap:5px;
}
.deposit-pending-table{
min-height:0;
overflow:auto;
border:1px solid #777;
background:#aaa;
}
.deposit-pending-table .menu-list-table{
width:100%;
min-width:760px;
table-layout:fixed;
font-size:14px;
}
.deposit-pending-table .menu-list-table th,
.deposit-pending-table .menu-list-table td{
height:22px;
padding:2px 6px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
border:1px solid #aaa;
}
.deposit-pending-table .menu-list-table th{
background:#fff;
font-size:16px;
font-weight:400;
}
.deposit-pending-table .menu-list-table td{
background:#efffff;
}
.deposit-pending-table .menu-list-table tr:nth-child(even) td{
background:#fff;
}
.deposit-pending-table .menu-list-table tr.selected td{
background:#0786dd!important;
color:#fff!important;
}
.deposit-pending-table .menu-list-table th:nth-child(1),
.deposit-pending-table .menu-list-table td:nth-child(1){width:50px;background:#eee}
.deposit-pending-table .menu-list-table th:nth-child(2){width:150px}
.deposit-pending-table .menu-list-table th:nth-child(3){width:100px}
.deposit-pending-table .menu-list-table th:nth-child(4){width:175px}
.deposit-pending-table .menu-list-table th:nth-child(5){width:200px}
.deposit-pending-table .menu-list-table th:nth-child(6){width:85px}
.deposit-pending-table .menu-list-table tr.selected td:first-child::after{
content:"▶";
color:#fff;
}
.deposit-pending-footer{
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
align-items:center;
gap:24px;
padding:6px 2px 0;
}
.deposit-pending-footer button{
width:97px;
height:37px;
border:1px solid #aaa;
background:#eee;
font-size:14px;
}
.deposit-pending-footer [data-add]{justify-self:start}
.deposit-pending-footer [data-delete],
.deposit-pending-footer [data-wash]{justify-self:center}
.deposit-pending-footer [data-close]{justify-self:end}
.deposit-pending-add-window{
width:min(516px,calc(100vw - 16px));
height:287px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.deposit-pending-add-window .window-body{
padding:17px 12px 8px;
overflow:hidden;
background:#eee;
}
.deposit-pending-add-window form{
display:grid;
grid-template-rows:1fr 48px;
height:100%;
}
.deposit-pending-add-grid{
display:grid;
grid-template-columns:108px 1fr;
grid-auto-rows:28px;
gap:6px 0;
align-items:center;
font-size:14px;
}
.deposit-pending-add-grid input,
.deposit-pending-add-grid select{
width:100%;
height:25px;
border:1px solid #aaa;
background:#fff;
padding:2px 4px;
}
.deposit-pending-add-grid input[readonly]{
background:#f2f2f2;
color:#777;
}
.deposit-pending-add-actions{
display:flex;
align-items:end;
justify-content:space-between;
}
.deposit-pending-add-actions button{
width:73px;
height:29px;
border:1px solid #aaa;
background:#eee;
}
.deposit-pending-process-window{
width:min(515px,calc(100vw - 16px));
height:min(392px,calc(100vh - 20px));
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.deposit-pending-process-window .window-body{
padding:15px 18px 9px;
overflow:hidden;
background:#eee;
}
.deposit-pending-process-window form{
display:grid;
grid-template-rows:1fr 39px;
height:100%;
}
.deposit-pending-process-grid{
display:grid;
grid-template-columns:109px 1fr;
gap:6px 0;
align-items:center;
min-height:0;
font-size:14px;
}
.deposit-pending-process-grid>input,
.deposit-pending-process-grid select,
.deposit-pending-process-user input{
width:100%;
height:24px;
border:1px solid #aaa;
border-radius:0;
background:#fff;
padding:2px 4px;
font-size:13px;
}
.deposit-pending-process-grid>input[readonly]{
background:#f4f4f4;
color:#777;
}
.deposit-pending-process-grid textarea{
width:100%;
height:76px;
resize:none;
border:1px solid #999;
border-radius:0;
background:#fff;
padding:4px;
font:13px Arial,sans-serif;
}
.deposit-pending-process-grid output{
display:block;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.deposit-pending-process-user{
display:grid;
grid-template-columns:1fr 73px;
gap:8px;
}
.deposit-pending-process-user button{
height:24px;
border:1px solid #aaa;
background:#eee;
}
.deposit-pending-process-bonus{
grid-column:1/-1;
display:flex;
align-items:center;
gap:5px;
}
.deposit-pending-process-actions{
display:flex;
justify-content:space-between;
align-items:end;
}
.deposit-pending-process-actions button{
min-width:73px;
height:23px;
border:1px solid #aaa;
border-radius:0;
background:#eee;
font-size:12px;
}
.deposit-pending-process-actions button:disabled{
background:#ccc;
color:#999;
}
.pending-wash-window{
width:min(580px,calc(100vw - 16px));
height:198px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.pending-wash-window .window-body{
display:flex;
flex-direction:column;
align-items:center;
padding:8px 12px;
overflow:hidden;
background:#eee;
font-size:14px;
}
.pending-wash-heading{
margin-bottom:14px;
}
.pending-wash-dates{
display:flex;
align-items:center;
gap:8px;
}
.pending-wash-dates input{
width:99px;
height:21px;
border:1px solid #999;
background:#fff;
padding:1px 3px;
font-size:12px;
}
.pending-wash-window button{
width:73px;
height:23px;
border:1px solid #aaa;
font-size:12px;
}
.pending-wash-window [data-check]{margin-top:10px}
.pending-wash-total{margin:8px 0}
.pending-wash-window button:disabled{background:#ccc;color:#999}
/* =========================================================
WD GANTUNG - LEGACY
========================================================= */
.withdraw-pending-legacy-window{
width:min(1000px,calc(100vw - 16px));
height:min(510px,calc(100vh - 20px));
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.withdraw-pending-legacy-window .window-body{
display:grid;
grid-template-rows:46px minmax(240px,1fr) 62px;
padding:14px 14px 0;
overflow:hidden;
background:#eee;
}
.withdraw-pending-total{
display:flex;
align-items:center;
justify-content:center;
background:#9dbbd8;
font-size:17px;
}
.withdraw-pending-table{
min-height:0;
margin:4px 4px 0;
overflow:auto;
border:1px solid #777;
background:#aaa;
}
.withdraw-pending-table .menu-list-table{
width:100%;
min-width:925px;
table-layout:fixed;
font-size:14px;
}
.withdraw-pending-table .menu-list-table th,
.withdraw-pending-table .menu-list-table td{
height:22px;
padding:2px 6px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
border:1px solid #aaa;
}
.withdraw-pending-table .menu-list-table th{
background:#fff;
font-size:16px;
font-weight:400;
}
.withdraw-pending-table .menu-list-table td{
background:#efffff;
}
.withdraw-pending-table .menu-list-table tr:nth-child(even) td{
background:#fff;
}
.withdraw-pending-table .menu-list-table tr.selected td{
background:#0786dd!important;
color:#fff!important;
}
.withdraw-pending-table .menu-list-table th:nth-child(1),
.withdraw-pending-table .menu-list-table td:nth-child(1){width:50px;background:#eee}
.withdraw-pending-table .menu-list-table th:nth-child(2){width:150px}
.withdraw-pending-table .menu-list-table th:nth-child(3){width:100px}
.withdraw-pending-table .menu-list-table th:nth-child(4){width:100px}
.withdraw-pending-table .menu-list-table th:nth-child(5){width:200px}
.withdraw-pending-table .menu-list-table th:nth-child(6){width:100px}
.withdraw-pending-table .menu-list-table th:nth-child(7){width:100px}
.withdraw-pending-table .menu-list-table th:nth-child(8){width:125px}
.withdraw-pending-table .menu-list-table tr.selected td:first-child::after{
content:"▶";
color:#fff;
}
.withdraw-pending-footer{
display:grid;
grid-template-columns:1fr 1fr 1fr;
align-items:center;
padding:5px 5px 0;
}
.withdraw-pending-footer button{
width:97px;
height:37px;
border:1px solid #aaa;
background:#eee;
font-size:14px;
}
.withdraw-pending-footer [data-add]{justify-self:start}
.withdraw-pending-footer [data-delete]{justify-self:center}
.withdraw-pending-footer [data-close]{justify-self:end}
.withdraw-pending-add-window{
width:min(508px,calc(100vw - 16px));
height:251px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.withdraw-pending-add-window .window-body{
padding:17px 16px 8px;
overflow:hidden;
background:#eee;
}
.withdraw-pending-add-window form{
display:grid;
grid-template-rows:1fr 43px;
height:100%;
}
.withdraw-pending-add-grid{
display:grid;
grid-template-columns:102px 1fr;
grid-auto-rows:29px;
gap:0;
align-items:center;
font-size:14px;
}
.withdraw-pending-add-grid>input,
.withdraw-pending-user-row input{
width:100%;
height:24px;
border:1px solid #aaa;
background:#fff;
padding:2px 4px;
}
.withdraw-pending-add-grid>input[readonly]{
background:#f4f4f4;
color:#777;
}
.withdraw-pending-user-row{
display:grid;
grid-template-columns:1fr 74px;
gap:7px;
align-items:center;
}
.withdraw-pending-user-row button{
width:74px;
height:24px;
border:1px solid #aaa;
background:#eee;
}
.withdraw-pending-add-actions{
display:flex;
align-items:end;
justify-content:space-between;
}
.withdraw-pending-add-actions button{
width:73px;
height:22px;
border:1px solid #aaa;
background:#eee;
font-size:12px;
}
.withdraw-pending-add-actions button:disabled{
background:#ccc;
color:#999;
}
.withdraw-pending-process-window{
width:min(520px,calc(100vw - 16px));
height:274px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.withdraw-pending-process-window .window-body{
padding:16px 18px 9px;
overflow:hidden;
background:#eee;
}
.withdraw-pending-process-window form{
display:grid;
grid-template-rows:1fr 39px;
height:100%;
}
.withdraw-pending-process-grid{
display:grid;
grid-template-columns:109px 1fr;
grid-auto-rows:29px;
align-items:center;
font-size:14px;
}
.withdraw-pending-process-grid input,
.withdraw-pending-process-grid select{
width:100%;
height:24px;
border:1px solid #aaa;
border-radius:0;
background:#fff;
padding:2px 4px;
font-size:13px;
}
.withdraw-pending-process-grid input[readonly]{
background:#f4f4f4;
color:#777;
}
.withdraw-pending-process-actions{
display:flex;
justify-content:space-between;
align-items:end;
}
.withdraw-pending-process-actions button{
min-width:73px;
height:23px;
border:1px solid #aaa;
border-radius:0;
background:#eee;
font-size:12px;
}
/* =========================================================
INPUT BONUS BULK - LEGACY
========================================================= */
.input-bonus-bulk-window{
width:min(475px,calc(100vw - 16px));
height:min(490px,calc(100vh - 20px));
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.input-bonus-bulk-window .window-body{
display:grid;
grid-template-rows:49px minmax(260px,1fr) 57px;
padding:8px 12px 0;
overflow:hidden;
background:#eee;
}
.bonus-bulk-top{
display:grid;
grid-template-columns:110px 121px 86px 25px 86px;
gap:4px;
align-items:center;
font-size:16px;
white-space:nowrap;
}
.bonus-bulk-top select,
.bonus-bulk-top input{
width:100%;
height:24px;
min-width:0;
border:1px solid #999;
background:#fff;
padding:1px 4px;
font-size:12px;
}
.bonus-bulk-top select{
font-size:12px;
}
.bonus-bulk-input{
width:100%;
height:100%;
min-height:0;
resize:none;
overflow:auto;
border:1px solid #999;
background:#fff;
padding:6px 8px;
font-family:"Segoe UI",Tahoma,Arial,sans-serif;
font-size:13px;
line-height:18px;
}
.bonus-bulk-bottom{
display:grid;
grid-template-columns:1fr 1fr 1fr;
align-items:center;
gap:55px;
}
.bonus-bulk-bottom button{
width:85px;
height:30px;
border:1px solid #aaa;
background:#eee;
font-size:13px;
}
.bonus-bulk-bottom [data-ok]{justify-self:start}
.bonus-bulk-bottom [data-reset]{justify-self:center}
.bonus-bulk-bottom [data-close]{justify-self:end}
/* =========================================================
FINAL LEGACY CONSISTENCY
Dialog lama yang masih memakai kelas generik
========================================================= */
.legacy-window button:not(.window-close){
border:2px outset #f8f8f8;
border-radius:0;
background:#eee;
}
.legacy-window button:not(.window-close):active:not(:disabled){
border-style:inset;
background:#ddd;
}
.legacy-window button:focus-visible,
.legacy-window input:focus-visible,
.legacy-window select:focus-visible,
.legacy-window textarea:focus-visible{
outline:1px dotted #111;
outline-offset:-4px;
}
.simple-window,
.list-window,
.password-window{
border:2px outset #edf5fb;
background:#bfd1e0;
}
.compact-window{
width:min(590px,calc(100vw - 24px));
height:min(310px,calc(100vh - 24px));
}
.compact-small-window{
height:min(225px,calc(100vh - 24px));
}
.server-info-window{
height:min(340px,calc(100vh - 24px));
}
.import-member-window{
width:min(610px,calc(100vw - 24px));
height:min(420px,calc(100vh - 24px));
}
.import-member-box{
margin-top:5px;
background:#bfd1e0;
}
.import-member-box>legend{
font-size:15px;
}
.import-member-box input[type=file]{
width:100%;
min-height:34px;
padding:5px;
border:2px inset #f4f4f4;
background:#fff;
}
.import-transaction-file-row{
display:grid;
grid-template-columns:minmax(0,1fr) 92px;
gap:10px;
align-items:stretch;
}
.import-transaction-file-row button{
min-height:34px;
border:2px outset #f8f8f8;
background:#eee;
}
.import-transaction-check-window{
width:min(500px,calc(100vw - 24px));
height:min(510px,calc(100vh - 24px));
}
.import-transaction-check-box{
height:calc(100% - 54px);
margin-top:5px;
background:#bfd1e0;
}
.import-transaction-check-list{
height:calc(100% - 10px);
overflow:auto;
border:2px inset #f4f4f4;
background:#fff;
}
.import-transaction-missing-list{
margin:0;
padding:8px 8px 8px 42px;
}
.import-transaction-missing-list li{
min-height:27px;
padding:5px 8px;
border-bottom:1px solid #c7c7c7;
overflow-wrap:anywhere;
}
.import-transaction-missing-list li:nth-child(even){
background:#e8ffff;
}
.import-transaction-check-empty{
padding:18px;
text-align:center;
color:#40596e;
}
.import-member-box p{
margin:3px 0 12px;
}
.import-member-note,
.import-member-status{
color:#40596e;
font-size:12px;
}
.import-member-status{
min-height:25px;
padding:6px 3px;
}
.simple-window .window-titlebar,
.list-window .window-titlebar,
.password-window .window-titlebar{
background:linear-gradient(90deg,#fdfdfd,#dbe8f2);
border-bottom:1px solid #8da4b7;
}
.simple-grid{
padding:14px;
border:2px groove #eef6fb;
background:#bfd1e0;
}
.simple-grid input,
.simple-grid select,
.simple-grid textarea,
.tool-row input,
.tool-row select{
border:2px inset #f4f4f4;
border-radius:0;
}
.simple-grid b,
.simple-grid span{
min-height:25px;
display:flex;
align-items:center;
overflow-wrap:anywhere;
}
.simple-actions{
padding:10px 2px 0;
}
.simple-actions button,
.tool-row button{
min-width:84px;
border:2px outset #f8f8f8;
}
.list-window [data-list]{
min-height:260px;
overflow:auto;
border:2px inset #f4f4f4;
background:#aaa;
}
.list-window .menu-list-table{
width:100%;
background:#fff;
}
.list-window .menu-list-table th{
background:#f4f4f4;
font-weight:400;
}
.list-window .menu-list-table tbody tr:nth-child(even) td{
background:#e8ffff;
}
.list-window .menu-list-table tr.selected td{
background:#0786dd!important;
color:#fff!important;
}
/* Audit Trail only: bounded scrolling keeps the horizontal bar visible. */
.audit-trail-window .window-body{
display:grid;
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto minmax(0,1fr) auto;
gap:8px;
overflow:hidden;
}
.audit-trail-window .audit-trail-tools{flex-wrap:wrap;margin:0;gap:8px 10px}
.audit-trail-window .audit-trail-tools label{white-space:nowrap}
.audit-trail-window .audit-trail-tools input[type="date"]{width:145px;min-width:130px}
.audit-trail-window .audit-operator-filter{display:flex;align-items:center;gap:8px}
.audit-trail-window .audit-operator-filter label{display:flex;align-items:center;gap:5px}
.audit-trail-window .audit-operator-filter input[type="checkbox"]{width:14px;height:14px;min-width:14px;margin:0;padding:0;accent-color:#0078d7}
.audit-trail-window .audit-operator-filter select{width:160px;min-width:120px;height:29px}
.audit-trail-window .audit-operator-status{font-size:11px;color:#41586d}
.audit-trail-window .audit-trail-grid[data-list]{min-width:0;min-height:0;overflow:auto;scrollbar-gutter:stable}
.audit-trail-window .audit-trail-grid .menu-list-table{width:max-content;min-width:100%;table-layout:auto}
.audit-trail-window .audit-trail-grid th,.audit-trail-window .audit-trail-grid td{white-space:nowrap;max-width:none;overflow:visible;text-overflow:clip}
.audit-trail-window .audit-trail-grid th{position:sticky;top:0;z-index:1}
.audit-trail-window .audit-trail-grid th:first-child,.audit-trail-window .audit-trail-grid td:first-child{min-width:28px;width:28px;text-align:center;background:#eee}
.audit-trail-window .audit-trail-grid th:nth-child(3){min-width:160px}
.audit-trail-window .audit-trail-grid th:nth-child(4){min-width:100px}
.audit-trail-window .audit-trail-grid th:nth-child(5){min-width:160px}
.audit-trail-window .audit-trail-grid th:nth-child(6){min-width:580px}
.audit-trail-window .audit-trail-grid th:nth-child(7){min-width:180px}
.audit-trail-window .audit-trail-grid tbody tr:nth-child(odd) td{background:#fff}
.audit-trail-window .audit-trail-grid tbody tr:nth-child(even) td{background:#e8ffff}
.audit-trail-window .audit-trail-grid tbody tr.selected td{background:#0078d7!important;color:#fff!important}
.audit-trail-window .audit-trail-grid tbody tr td:first-child{background:#eee!important;color:#222!important}
.audit-trail-window .audit-trail-grid tr.selected td:first-child::after{content:'\25B6'}
.audit-trail-window .audit-trail-footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.audit-trail-window .audit-trail-footer [data-status]{flex:1;min-width:160px;font-size:12px;overflow-wrap:anywhere}
.audit-trail-window .audit-trail-footer button{min-width:84px;min-height:29px}
.tool-row{
min-height:42px;
padding:5px 7px;
border:2px groove #eef6fb;
background:#bfd1e0;
}
input[data-integer]{
text-align:right;
font-variant-numeric:tabular-nums;
}
@media (max-width:520px){
.login-content{padding:14px}
.login-brand{margin-bottom:12px}
.login-brand-icon{width:45px;height:45px;font-size:31px}
.login-brand-name{font-size:20px}
.legacy-form-row{grid-template-columns:80px 1fr}
.login-footer{align-items:center}
.import-transaction-file-row{grid-template-columns:1fr}
}
/* Separate browser windows — appended to the user's custom app(2).css. */
.legacy-window .window-caption{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:6px}
.legacy-window .window-close{flex-shrink:0}
.legacy-window .window-titlebar .window-popout{
flex:0 0 auto;width:auto;min-width:0;height:22px;min-height:0;margin:0 5px 0 0;
padding:1px 7px;border:1px solid #9ab2ca;border-radius:2px;
background:#e9f2fb;color:#174875;font-size:11px;line-height:18px;
font-weight:600;white-space:nowrap;cursor:pointer;
}
.legacy-window .window-titlebar .window-popout:hover{background:#d4e7fa;border-color:#487eaf}
.legacy-window .window-titlebar .window-popout:focus-visible{outline:2px solid #0078d7;outline-offset:1px}
.legacy-window .window-titlebar .window-popout:active{background:#bfd8f1}
body.external-popup-page{min-width:0;min-height:0;background:#eee}
.external-popup-page #dialogLayer>.legacy-window.is-detached{
position:fixed!important;inset:0!important;transform:none!important;
width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
max-width:none!important;max-height:none!important;margin:0!important;
border:0;box-shadow:none;
}
.external-popup-page .is-detached>.window-titlebar{cursor:default}
.external-popup-page .legacy-toast{max-width:calc(100vw - 24px);overflow-wrap:anywhere}
/* Master authenticator — retain all existing/custom styles above. */
.login-dialog.master-2fa-mode{width:min(610px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}
.master-2fa-mode .login-brand{margin-bottom:14px}
#masterTwoFactor{padding:14px;border:2px groove #eef6fb;background:#f4f8fc}
#masterTwoFactor .mfa-heading{display:flex;gap:12px;align-items:flex-start;color:#173d73}
#masterTwoFactor .mfa-heading>span{font-size:25px}
#masterTwoFactor h2{margin:0 0 5px;font-size:18px}
#masterTwoFactor p{line-height:1.45}
#masterTwoFactor .mfa-heading p{margin:0 0 12px}
#masterTwoFactor .mfa-steps{padding-left:21px;line-height:1.5}
#masterTwoFactor .mfa-qr{width:248px;max-width:100%;margin:12px auto;background:white}
#masterTwoFactor .mfa-qr svg{display:block;width:100%;height:auto}
#masterTwoFactor .mfa-account{text-align:center;overflow-wrap:anywhere;font-weight:600}
#masterTwoFactor details{border:1px solid #bfcede;background:#fff;padding:9px;margin-bottom:12px}
#masterTwoFactor summary{cursor:pointer;color:#174875;margin-bottom:5px}
#masterTwoFactor details label{display:block;margin-top:10px}
#masterTwoFactor [data-mfa-secret]{width:100%;font:13px Consolas,monospace;padding:7px;margin-top:5px;border:1px solid #9ab2ca}
#masterTwoFactor .mfa-input-label{display:block;margin:13px 0 6px;font-weight:600}
#masterTwoFactor [data-mfa-code]{display:block;width:100%;height:40px;padding:6px 9px;border:2px inset #e5edf5;background:#fff;font:20px Consolas,monospace;letter-spacing:2px}
#masterTwoFactor [data-mfa-code][inputmode=text]{font-size:14px;letter-spacing:0}
#masterTwoFactor .mfa-check{display:flex;align-items:flex-start;gap:7px;margin:12px 0;line-height:1.4}
#masterTwoFactor .mfa-check input{margin:2px 0 0;flex:0 0 auto}
#masterTwoFactor .mfa-note{font-size:12px;color:#465e76}
#masterTwoFactor .mfa-recovery-codes{padding:10px 10px 10px 37px;background:white;border:1px solid #bfcede;line-height:1.8;font:13px/1.8 Consolas,monospace;overflow-wrap:anywhere}
#masterTwoFactor .mfa-expiry{color:#526780;font-size:12px;margin:12px 0 8px}
#masterTwoFactor .mfa-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
#masterTwoFactor button{padding:6px 10px;border:2px outset #fff;background:#eee;cursor:pointer}
#masterTwoFactor [data-mfa-submit]{background:#d9eafc;color:#143e69;font-weight:600}
#masterTwoFactor button:disabled{color:#888;cursor:default}
#masterTwoFactor :focus-visible{outline:2px solid #0078d7;outline-offset:2px}