Green D'mel Bali

Sabar Yah ...
✓ Data Synced
Menu
User role
© 2026 Green D'mel Bali
Develop by ATN | PT. Green Pratama Sejati
.header{background:linear-gradient(135deg,#1e3c2c,#2d5a3b);color:#fff;padding:10px 16px;border-radius:16px;margin-bottom:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;position:sticky;top:8px;z-index:60} .header h1{font-size:1.2rem}.header p{font-size:.7rem;opacity:.9} .header-right{display:flex;align-items:center;gap:8px} .header-mobile-info{display:none} .user-info{font-size:.75rem;opacity:.9} .btn-logout{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3);padding:5px 12px;font-size:.75rem;border-radius:16px;cursor:pointer} .btn-logout:hover{background:rgba(255,255,255,.3)} .mobile-menu-btn{display:none;background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3);width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:1.1rem;align-items:center;justify-content:center} .tab-nav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;background:#fff;padding:4px 8px;border-radius:40px;box-shadow:0 2px 8px rgba(0,0,0,.05);overflow-x:auto;-webkit-overflow-scrolling:touch;position:sticky;top:68px;z-index:50} .tab-btn{background:0 0;color:#2c5e3f;border:none;padding:6px 14px;font-weight:600;border-radius:30px;cursor:pointer;transition:.2s;white-space:nowrap;font-size:.78rem} .tab-btn.active{background:#2d5a3b;color:#fff} .tab-btn:hover:not(.active){background:#e9f5ec} .tab-pane{display:none;animation:fadeIn .2s ease} .tab-pane.active-pane{display:block} @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} .two-columns{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch} .col{flex:1;min-width:260px;display:flex;flex-direction:column;gap:10px} .card{background:#fff;border-radius:14px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,.04);display:flex;flex-direction:column} .card-fill{flex:1} .card h2{font-size:1rem;margin-bottom:10px;border-left:3px solid #2d5a3b;padding-left:10px;color:#1a2a2f} .form-group{margin-bottom:7px;display:flex;flex-wrap:wrap;align-items:center;gap:6px} .form-group label{width:85px;font-weight:600;color:#2d5a3b;font-size:.75rem} input,select,button,textarea{border-radius:10px;border:1px solid #e2e8f0;padding:7px 10px;font-size:.8rem;background:#fff;max-width:100%} input:disabled,select:disabled,button:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7} button{background:#2d5a3b;color:#fff;border:none;font-weight:600;cursor:pointer;transition:.15s;min-height:35px} button:hover:not(:disabled){background:#1e3c2c} button:active:not(:disabled){transform:scale(.98)} .btn-success{background:#27ae60}.btn-warning{background:#e67e22}.btn-purchase{background:#2980b9} .btn-wa{background:#25D366}.btn-excel{background:#0f7b3a}.btn-danger{background:#e74c3c} .btn-secondary{background:#5a6e7c}.btn-edit{background:#f39c12}.btn-view{background:#8e44ad} .btn-remove{background:#c0392b;padding:5px 8px;font-size:.75rem;min-width:32px;height:32px} .btn-sm{padding:3px 8px;font-size:.68rem;min-height:28px} .table-wrapper{overflow-x:auto;max-height:300px;overflow-y:auto;border-radius:10px;border:1px solid #edf2f7} table{width:100%;border-collapse:collapse;font-size:.75rem;min-width:auto} th,td{padding:6px 5px;text-align:left;border-bottom:1px solid #eef2f6} th{background:#eef5ec;font-weight:700;color:#1e3c2c;position:sticky;top:0;z-index:10;font-size:.72rem} .badge-in{background:#d5f4e6;color:#1e7e4a;padding:2px 6px;border-radius:14px;font-size:.65rem;font-weight:600;display:inline-block} .badge-out{background:#fee2e2;color:#c0392b}.badge-rusak{background:#f5b7b1;color:#922b21} .badge-produce{background:#d1c4e9;color:#4527a0}.badge-received{background:#d5f4e6;color:#1e7e4a} .purchase-item{background:#fef9e6;border-left:3px solid #2980b9;padding:10px;margin-bottom:8px;border-radius:12px} .po-item-row{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap;background:#fafafa;padding:6px;border-radius:10px} .po-items-list{margin-bottom:10px} .purchase-list-container{flex:1;overflow-y:auto;min-height:120px;max-height:350px} .barang-list{flex:1;overflow-y:auto;border-radius:10px;border:1px solid #edf2f7;min-height:120px;max-height:350px} .barang-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid #ecf3fa;flex-wrap:wrap;gap:6px} .barang-item.low-stock{background:#fff5f5;border-left:3px solid #e74c3c} .stock-badge{padding:2px 8px;border-radius:12px;font-weight:600;font-size:.72rem} .stock-normal{background:#eef5ec;color:#2e7d32}.stock-low{background:#fee2e2;color:#c0392b;animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}} .item-name{font-weight:600;color:#1a2a2f;font-size:.82rem} .filter-bar{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;background:#f8fafc;padding:7px 8px;border-radius:12px} .filter-bar input,.filter-bar select{flex:1;min-width:80px;font-size:.75rem;padding:5px 8px} .stock-summary{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap} .summary-badge{padding:4px 10px;border-radius:12px;font-size:.7rem;font-weight:600} .summary-total{background:#e3f2fd;color:#1565c0}.summary-low{background:#ffebee;color:#c62828} .recipe-item{background:#f5f9ff;border:1px solid #dce6f0;border-radius:12px;padding:8px;margin-bottom:8px} .ingredient-list{margin:6px 0 0 12px;font-size:.7rem;color:#2c3e50} .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1000;justify-content:center;align-items:center;padding:12px} .modal-content{background:#fff;padding:16px;border-radius:16px;max-width:480px;width:100%;max-height:85vh;overflow-y:auto} .modal-content.large{max-width:750px} .modal-content h3{margin-bottom:12px;color:#1e3c2c;font-size:1rem} .modal-buttons{display:flex;gap:6px;margin-top:10px}.modal-buttons button{flex:1} .detail-row{display:flex;padding:5px 0;border-bottom:1px solid #ecf3fa;font-size:.78rem} .detail-label{font-weight:600;width:80px;color:#2d5a3b;flex-shrink:0} .detail-value{flex:1;color:#1a2a2f;word-break:break-word} .ingredient-row{display:flex;gap:5px;margin-bottom:5px;flex-wrap:wrap;align-items:center;background:#fafafa;padding:5px;border-radius:8px} .searchable-select-wrapper{position:relative;flex:1;min-width:110px} .searchable-select-input{width:100%;padding:7px 10px;border:2px solid #e2e8f0;border-radius:10px;font-size:.78rem;background:#fff;cursor:pointer} .searchable-select-input:focus{border-color:#2d5a3b;outline:0;box-shadow:0 0 0 2px rgba(45,90,59,.1)} .searchable-select-input.selected{border-color:#27ae60;background:#f0fff4} .searchable-select-dropdown{display:none;position:absolute;top:100%;left:0;right:0;max-height:180px;overflow-y:auto;background:#fff;border:2px solid #2d5a3b;border-radius:10px;margin-top:3px;z-index:100;box-shadow:0 4px 15px rgba(0,0,0,.12)} .searchable-select-dropdown.open{display:block} .searchable-select-option{padding:7px 10px;cursor:pointer;font-size:.78rem;border-bottom:1px solid #f0f0f0;transition:.1s;display:flex;justify-content:space-between;align-items:center} .searchable-select-option:hover{background:#e9f5ec} .searchable-select-option.active{background:#d5f4e6;font-weight:600} .searchable-select-no-result{padding:10px;text-align:center;color:#999;font-size:.78rem} .searchable-select-confirm{display:none;position:absolute;bottom:-28px;left:0;right:0;background:#27ae60;color:#fff;padding:4px;text-align:center;border-radius:6px;font-size:.7rem;cursor:pointer;z-index:101} .searchable-select-confirm.show{display:block} .toast{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:#1e3c2c;color:#fff;padding:8px 16px;border-radius:10px;font-size:.78rem;z-index:2000;box-shadow:0 4px 15px rgba(0,0,0,.2);animation:slideUp .3s ease} @keyframes slideUp{from{transform:translate(-50%,100px);opacity:0}to{transform:translate(-50%,0);opacity:1}} .login-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:3000;display:flex;justify-content:center;align-items:center;padding:12px} .login-box{background:#fff;padding:24px;border-radius:20px;max-width:360px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.2)} .login-box h2{text-align:center;margin-bottom:20px;color:#1e3c2c;font-size:1.2rem} .login-box .form-group{flex-direction:column;align-items:stretch}.login-box label{width:100%}.login-box input{width:100%} .login-error{color:#c0392b;font-size:.75rem;text-align:center;margin-top:6px;display:none} .supplier-select-group{display:flex;gap:6px;align-items:center;flex:1} .supplier-select-group select{flex:2} .receive-item-row{display:flex;align-items:center;gap:5px;padding:5px;background:#f9f9f9;border-radius:8px;margin-bottom:3px;flex-wrap:wrap} .receive-item-row label{margin:0;font-size:.78rem;flex:1;min-width:130px} .receive-item-row input[type=number]{width:65px} .item-missing{background:#fff0f0}.item-complete{background:#f0fff0} .loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.8);z-index:4000;display:none;justify-content:center;align-items:center;flex-direction:column} .spinner{width:36px;height:36px;border:3px solid #e2e8f0;border-top:3px solid #2d5a3b;border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} .loading-text{margin-top:10px;color:#2d5a3b;font-weight:600;font-size:.85rem} .hk-sub-tab-nav{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:10px} .hk-sub-tab-btn{background:#e8f5e9;color:#2d5a3b;border:2px solid transparent;padding:5px 12px;border-radius:16px;cursor:pointer;font-size:.72rem;font-weight:600;transition:.2s} .hk-sub-tab-btn.active{background:#2d5a3b;color:#fff} .hk-sub-tab-pane{display:none}.hk-sub-tab-pane.active{display:block;animation:fadeIn .2s ease} .hk-item-row{display:flex;gap:5px;align-items:center;margin-bottom:5px;flex-wrap:wrap;background:#f8faf8;padding:6px;border-radius:10px} .log-item{background:#fafafa;border-left:3px solid #2d5a3b;padding:8px 10px;margin-bottom:6px;border-radius:10px;font-size:.75rem} .action-btns{display:flex;gap:3px;flex-wrap:wrap} .sync-indicator{position:fixed;top:8px;right:8px;background:#27ae60;color:#fff;padding:4px 10px;border-radius:16px;font-size:.65rem;z-index:9999;display:none;animation:fadeInOut 2s ease} @keyframes fadeInOut{0%{opacity:0;transform:translateY(-10px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1}100%{opacity:0}} .balance-table{width:100%;border-collapse:collapse;font-size:.7rem;min-width:auto} .balance-table th{background:#eef5ec;font-weight:700;color:#1e3c2c;padding:4px 3px;text-align:center;font-size:.65rem;position:sticky;top:0;z-index:5} .balance-table td{padding:4px 3px;text-align:center;border-bottom:1px solid #eef2f6;font-size:.68rem} .balance-table .balance-in{color:#1e7e4a;font-weight:600} .balance-table .balance-out{color:#c0392b;font-weight:600} .balance-table .balance-net{font-weight:700} .balance-table .balance-net.positive{color:#1e7e4a} .balance-table .balance-net.negative{color:#c0392b} .min-stock-label{font-size:.65rem;color:#666} .floating-footer{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,#1e3c2c,#2d5a3b);color:#fff;padding:8px 16px;font-size:.7rem;z-index:999;box-shadow:0 -2px 10px rgba(0,0,0,.15);display:flex;justify-content:space-between;align-items:center} .floating-footer .footer-left{font-weight:600;font-size:.72rem} .floating-footer .footer-right{font-size:.65rem;opacity:.9} .mobile-nav-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:2000} .mobile-nav-drawer{position:fixed;top:0;left:-280px;width:260px;height:100%;background:#fff;z-index:2001;padding:16px;transition:left .3s ease;overflow-y:auto;box-shadow:2px 0 15px rgba(0,0,0,.2)} .mobile-nav-drawer.open{left:0} .mobile-nav-drawer .drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #eef5ec} .mobile-nav-drawer .drawer-user{background:#eef5ec;padding:10px;border-radius:10px;margin-bottom:12px} .mobile-nav-drawer .drawer-user strong{color:#1e3c2c;display:block} .mobile-nav-drawer .drawer-user span{font-size:.7rem;color:#666} .mobile-nav-drawer .drawer-tab{display:block;width:100%;text-align:left;padding:10px 14px;margin-bottom:4px;border-radius:10px;background:#f8faf8;color:#2d5a3b;font-weight:600;font-size:.78rem;border:none;cursor:pointer} .mobile-nav-drawer .drawer-tab.active{background:#2d5a3b;color:#fff} .mobile-nav-drawer .drawer-close{background:#e74c3c;color:#fff;border:none;width:32px;height:32px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center} .hk-laundry-layout{display:flex;gap:10px;flex-wrap:wrap} .hk-laundry-layout .laundry-form-col{flex:0 0 320px;min-width:280px} .hk-laundry-layout .laundry-logs-col{flex:1;min-width:280px;display:flex;flex-direction:column;gap:10px} @media(min-width:1400px){.app-container{max-width:100%}.two-columns{gap:12px}.col{min-width:300px}} @media(max-width:768px){ body{padding:4px;padding-bottom:50px} .header{padding:8px 12px;border-radius:12px;flex-direction:row;align-items:center;position:sticky;top:4px} .header h1{font-size:.9rem}.header p{display:none} .header-right{display:none} .header-mobile-info{display:flex;align-items:center;gap:6px} .header-mobile-info .user-badge{background:rgba(255,255,255,.2);padding:3px 8px;border-radius:12px;font-size:.65rem} .mobile-menu-btn{display:flex} .tab-nav{display:none;gap:3px;padding:3px 6px;border-radius:30px;position:sticky;top:52px} .tab-nav.show-mobile{display:flex} .tab-btn{padding:5px 10px;font-size:.7rem} .two-columns{flex-direction:column;gap:8px}.col{min-width:100%} .card{padding:10px;border-radius:12px} .form-group{flex-direction:column;align-items:stretch;gap:3px}.form-group label{width:100%} input,select,button,textarea{padding:8px 10px;font-size:.82rem} .table-wrapper{overflow-x:visible;max-height:none;overflow-y:visible;border-radius:10px;border:1px solid #edf2f7} table{width:100%;border-collapse:collapse;font-size:.68rem;min-width:auto;display:block} table thead{display:none}table tbody{display:block} table tr{display:block;margin-bottom:8px;border:1px solid #eef2f6;border-radius:8px;padding:6px;background:#fff} table td{display:flex;justify-content:space-between;align-items:center;padding:5px 6px;border-bottom:1px solid #f0f0f0;text-align:right;font-size:.7rem} table td:before{content:attr(data-label);font-weight:700;color:#2d5a3b;text-align:left;flex-shrink:0;margin-right:8px;font-size:.65rem} table td:last-child{border-bottom:none} .balance-table{min-width:auto;display:table}.balance-table thead{display:table-header-group} .balance-table tbody{display:table-row-group}.balance-table tr{display:table-row;margin-bottom:0;border:none;border-radius:0;padding:0} .balance-table td{display:table-cell;text-align:center;padding:4px 2px;font-size:.62rem}.balance-table td:before{display:none} .searchable-select-dropdown{max-height:140px}.modal-content{padding:12px;max-height:90vh} .purchase-item{padding:8px}.purchase-item button{font-size:.65rem;padding:5px 8px} .filter-bar{flex-direction:column;gap:4px;padding:6px}.filter-bar input,.filter-bar select{width:100%;min-width:auto} .hk-item-row{flex-direction:column;align-items:stretch;gap:3px}.hk-item-row .searchable-select-wrapper{min-width:100%} .receive-item-row{flex-direction:column;align-items:stretch;gap:3px}.receive-item-row label{min-width:auto}.receive-item-row input[type=number]{width:100%} .po-item-row{flex-direction:column;align-items:stretch}.po-item-row .searchable-select-wrapper{min-width:100%} .modal-content.large{max-width:95%}.barang-item{flex-direction:column;align-items:flex-start}.barang-item .action-btns{margin-top:4px} .hk-laundry-layout{flex-direction:column!important}.hk-laundry-layout .laundry-form-col{flex:0 0 auto;min-width:100%} .floating-footer{padding:6px 10px;font-size:.65rem}.floating-footer .footer-left{font-size:.65rem}.floating-footer .footer-right{font-size:.6rem} } @media(max-width:480px){ body{padding:2px;padding-bottom:45px}.card{padding:8px;border-radius:10px} .header{padding:6px 10px;border-radius:10px;top:2px}.header h1{font-size:.8rem} table td{font-size:.65rem;padding:4px 5px}table td:before{font-size:.6rem} .tab-btn{padding:4px 8px;font-size:.65rem}button{min-height:30px;font-size:.72rem} .filter-bar{padding:4px}.floating-footer{flex-direction:column;text-align:center;gap:1px;padding:5px 8px} }

Green D'mel Bali

Sabar Yah ...
✓ Data Synced
Menu
User role
© 2026 Green D'mel Bali
Develop by ATN | PT. Green Pratama Sejati