@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";:root{--green-dark:#1a5c2a;--green-mid:#2d7a3a;--green-accent:#4caf50;--yellow:#f5c518;--blue-btn:#2196f3;--bg:#f0f2f5;--sidebar-w:210px;--header-h:56px;--radius:8px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:14px}body{background:var(--bg);color:#333;min-height:100vh;font-family:Poppins,sans-serif}button,input,select,textarea{font-family:Poppins,sans-serif}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.app-wrapper{background:var(--bg);flex-direction:column;min-height:100vh;display:flex}.app-header{height:var(--header-h);z-index:100;background:#fff;border-bottom:1px solid #e8e8e8;justify-content:space-between;align-items:center;padding-right:20px;display:flex;position:fixed;top:0;left:0;right:0}.header-left{align-items:center;min-width:0;display:flex}.header-logo-area{width:var(--sidebar-w);height:var(--header-h);background:#fff;border-right:1px solid #e8e8e8;flex-shrink:0;justify-content:center;align-items:center;gap:6px;display:flex}.header-logo-text{line-height:1.35}.header-logo-text .name{color:var(--green-dark);letter-spacing:.3px;font-size:9px;font-weight:700}.header-logo-text .sub{color:var(--green-dark);font-size:8px;font-weight:500}.header-toggle{cursor:pointer;color:#888;background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;margin-left:10px;font-size:15px;display:flex}.header-toggle:hover{background:#f5f5f5}.header-brand{color:var(--green-dark);white-space:nowrap;margin-left:8px;font-size:15px;font-weight:700}.header-sep{color:#ddd;margin:0 10px;font-size:13px}.header-breadcrumb{color:#999;white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.header-right{flex-shrink:0;align-items:center;gap:10px;display:flex}.header-greeting{text-align:right;line-height:1.5}.header-greeting .greet-label{color:#aaa;font-size:11px;display:block}.header-greeting .greet-name{color:#222;font-size:13px;font-weight:600;display:block}.header-avatar{background:#e0e0e0;border:2px solid #eee;border-radius:50%;flex-shrink:0;width:36px;height:36px;overflow:hidden}.app-sidebar{width:var(--sidebar-w);top:var(--header-h);z-index:50;background:#fff;border-right:1px solid #e8e8e8;transition:transform .25s;position:fixed;bottom:0;left:0;overflow-y:auto}.app-sidebar.collapsed{transform:translate(-100%)}.sidebar-group-header{color:#777;cursor:pointer;-webkit-user-select:none;user-select:none;border-bottom:1px solid #f0f0f0;justify-content:space-between;align-items:center;padding:11px 16px;font-size:13px;font-weight:600;transition:color .15s;display:flex}.sidebar-group-header.open{color:var(--green-dark)}.sidebar-group-label{align-items:center;gap:8px;display:flex}.sidebar-chevron{color:#bbb;font-size:11px;transition:transform .2s;display:inline-block}.sidebar-chevron.open{transform:rotate(0)}.sidebar-chevron.closed{transform:rotate(-90deg)}.sidebar-sub{margin:0;padding:0;list-style:none}.sidebar-sub-item{color:#666;cursor:pointer;border-left:3px solid #0000;align-items:center;gap:8px;padding:9px 16px 9px 38px;font-size:12px;font-weight:400;transition:all .15s;display:flex}.sidebar-sub-item:hover{background:#f9f9f9}.sidebar-sub-item.active{color:var(--green-dark);border-left-color:var(--green-dark);background:#f0f7f2;font-weight:600}.sidebar-dot{background:#ccc;border-radius:50%;flex-shrink:0;width:6px;height:6px;display:inline-block}.sidebar-sub-item.active .sidebar-dot{background:var(--green-dark)}.app-body{margin-top:var(--header-h);flex:1;display:flex}.app-main{margin-left:var(--sidebar-w);min-height:calc(100vh - var(--header-h) - 38px);flex:1;padding:24px;transition:margin-left .25s}.app-main.full{margin-left:0}.app-footer{text-align:right;color:#aaa;background:var(--bg);margin-left:var(--sidebar-w);padding:10px 28px;font-size:12px;transition:margin-left .25s}.app-footer.full{margin-left:0}.app-footer strong{color:#888;font-weight:600}.card{border-radius:var(--radius);background:#fff;border:1px solid #e8e8e8;overflow:hidden;box-shadow:0 1px 6px #0000000f}.card-header{background:var(--green-dark);color:#fff;justify-content:space-between;align-items:center;height:50px;padding:0 20px;display:flex}.card-header-left{align-items:center;gap:10px;display:flex}.card-header-title{font-size:15px;font-weight:600}.card-back-btn{color:#fff;cursor:pointer;background:#fff3;border:1px solid #ffffff4d;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;font-size:15px;display:flex}.card-refresh-btn{color:#fff;cursor:pointer;background:#ffffff26;border:1px solid #ffffff40;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;display:flex}.card-body{padding:20px 24px}.dt-toolbar{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:16px;display:flex}.dt-search-label{color:#666;font-size:13px;font-weight:500}.dt-search-input{color:#333;background:#fafafa;border:1px solid #ddd;border-radius:5px;outline:none;width:200px;padding:5px 12px;font-family:Poppins,sans-serif;font-size:12px;transition:border-color .2s}.dt-search-input:focus{border-color:var(--green-dark)}.dt-table-wrap{-webkit-overflow-scrolling:touch;overflow-x:auto}.dt-table{border-collapse:collapse;width:100%;min-width:500px;font-size:13px}.dt-table thead tr{border-bottom:1px solid #e8e8e8}.dt-table th{color:#888;text-align:left;white-space:nowrap;background:#fff;padding:10px 14px;font-size:12px;font-weight:500}.dt-table th.center{text-align:center}.dt-table td{color:#444;vertical-align:middle;padding:12px 14px;font-size:13px}.dt-table td.center{text-align:center}.dt-table tbody tr{border-bottom:1px solid #f2f2f2;transition:background .1s}.dt-table tbody tr:hover{background:#fafcfa}.dt-sort-icon{color:#ccc;margin-left:4px;font-size:10px}.dt-footer{color:#888;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;font-size:12px;display:flex}.dt-perpage{background:#fff;border:1px solid #ddd;border-radius:6px;align-items:center;display:flex;overflow:hidden}.dt-perpage select{cursor:pointer;color:#444;background:0 0;border:none;outline:none;padding:5px 6px;font-family:Poppins,sans-serif;font-size:12px}.dt-perpage-caret{color:#aaa;padding-right:6px;font-size:10px}.dt-pagination{align-items:center;gap:4px;display:flex}.dt-page-btn{color:#666;cursor:pointer;background:#fff;border:1px solid #e0e0e0;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;font-family:Poppins,sans-serif;font-size:13px;transition:all .15s;display:flex}.dt-page-btn:hover:not(.active):not(:disabled){background:#f5f5f5}.dt-page-btn.active{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}.dt-page-btn:disabled{color:#ccc;cursor:default}.btn-dl{background:var(--blue-btn);color:#fff;cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;width:34px;height:34px;font-size:16px;display:flex}.btn-action{background:var(--green-dark);color:#fff;cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;width:34px;height:34px;font-size:15px;display:flex}.btn-action:hover{background:var(--green-mid)}.badge-success{color:#2e7d32;background:#e8f5e9;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-block}.badge-warning{color:#f57f17;background:#fff8e1;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-block}.equiv-wrap{flex-wrap:wrap;gap:5px;display:flex}.equiv-btn{cursor:pointer;color:#fff;border:none;border-radius:5px;justify-content:center;align-items:center;width:28px;height:28px;font-family:Poppins,sans-serif;font-size:12px;font-weight:700;transition:opacity .15s;display:flex}.equiv-btn:hover{opacity:.85}.modal-overlay{z-index:200;background:#0006;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-box{background:#fff;border-radius:8px;flex-direction:column;width:640px;max-width:100%;max-height:92vh;animation:.2s modalIn;display:flex;overflow:hidden;box-shadow:0 12px 48px #00000038}@keyframes modalIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}.modal-header{background:var(--green-dark);color:#fff;flex-shrink:0;justify-content:space-between;align-items:center;padding:13px 20px;display:flex}.modal-title{font-size:14px;font-weight:600}.modal-close{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:28px;height:28px;font-size:20px;display:flex}.modal-close:hover{background:#ffffff26}.modal-rfq-no{color:#555;flex-shrink:0;padding:10px 20px 0;font-size:12px;font-weight:500}.modal-body{flex:1;padding:14px 20px;overflow-y:auto}.modal-body::-webkit-scrollbar{width:4px}.modal-body::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}.modal-footer{background:#fff;border-top:1px solid #eee;flex-shrink:0;justify-content:flex-end;gap:10px;padding:12px 20px;display:flex}.btn-tutup{color:#555;cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:5px;padding:8px 24px;font-family:Poppins,sans-serif;font-size:13px}.btn-tutup:hover{background:#f5f5f5}.btn-simpan{background:var(--green-dark);color:#fff;cursor:pointer;border:none;border-radius:5px;padding:8px 24px;font-family:Poppins,sans-serif;font-size:13px;font-weight:600}.btn-simpan:hover{background:var(--green-mid)}.form-field{grid-template-columns:155px 1fr;align-items:start;gap:0 14px;margin-bottom:12px;display:grid}.form-label{color:#444;padding-top:8px;font-size:12px;font-weight:500;line-height:1.4}.form-req{color:#e53935}.form-input{color:#333;box-sizing:border-box;background:#f5f7f5;border:1px solid #e0e0e0;border-radius:5px;outline:none;width:100%;padding:7px 10px;font-family:Poppins,sans-serif;font-size:13px}.form-input.editable{background:#fff}.form-input:focus{border-color:var(--green-dark)}.form-radio-group{flex-wrap:wrap;gap:20px;padding-top:6px;display:flex}.form-radio-label{cursor:pointer;align-items:center;gap:6px;font-size:13px;display:flex}.form-price-row{align-items:center;gap:8px;display:flex}.form-price-row .form-input{flex:1}.form-price-per{color:#888;white-space:nowrap;flex-shrink:0;font-size:12px}.form-price-unit{flex-shrink:0;width:110px}.form-file-row{border:1px solid #e0e0e0;border-radius:5px;align-items:center;gap:0;margin-bottom:8px;display:flex;overflow:hidden}.form-file-choose{cursor:pointer;white-space:nowrap;color:#444;background:#e8e8e8;border-right:1px solid #d0d0d0;flex-shrink:0;padding:6px 14px;font-size:12px}.form-file-name{color:#aaa;padding:6px 12px;font-size:12px}.notif{z-index:500;background:var(--green-dark);color:#fff;border-radius:8px;padding:12px 20px;font-size:13px;animation:.3s slideIn;position:fixed;top:68px;right:20px;box-shadow:0 4px 16px #0003}@keyframes slideIn{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.login-page{background:#f5f5f5;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:16px;display:flex}.login-logo{text-align:center;margin-bottom:22px;animation:.4s fadeUp}.login-logo .logo-row{justify-content:center;align-items:center;gap:8px;margin-bottom:2px;display:flex}.login-logo .logo-icon{background:var(--green-dark);border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.login-logo .logo-name{color:var(--green-dark);letter-spacing:.5px;font-size:13px;font-weight:700}.login-logo .logo-sub{color:var(--green-dark);font-size:12px;font-weight:600}.login-card{background:#fff;border-radius:10px;width:100%;max-width:380px;padding:28px 32px 32px;animation:.5s fadeUp;box-shadow:0 2px 16px #0000001a}.login-title{color:#222;text-align:center;margin-bottom:4px;font-size:18px;font-weight:700}.login-desc{color:#888;text-align:center;margin-bottom:24px;font-size:11px;line-height:1.6}.login-field{margin-bottom:16px}.login-field-header{justify-content:space-between;margin-bottom:5px;display:flex}.login-field-label{color:#444;font-size:12px;font-weight:600}.login-forgot{color:#e53935;cursor:pointer;font-size:11px;font-weight:500}.login-input-wrap{position:relative}.login-input{color:#333;background:#fff;border:1px solid #ddd;border-radius:6px;outline:none;width:100%;padding:9px 36px 9px 12px;font-family:Poppins,sans-serif;font-size:13px;transition:border-color .2s}.login-input:focus{border-color:var(--green-dark)}.login-input.error{border-color:#e53935}.login-input-icon{color:#888;cursor:default;pointer-events:none;background:#e0e0e0;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:700;display:flex;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.login-eye-btn{cursor:pointer;background:0 0;border:none;align-items:center;padding:0;display:flex;position:absolute;top:50%;right:32px;transform:translateY(-50%)}.login-error{color:#e53935;margin-top:4px;font-size:11px}.login-btn{background:var(--green-dark);color:#fff;cursor:pointer;border:none;border-radius:6px;width:100%;padding:11px 0;font-family:Poppins,sans-serif;font-size:14px;font-weight:600;transition:background .2s}.login-btn:hover{background:var(--green-mid)}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (width<=900px){:root{--sidebar-w:200px}.header-breadcrumb,.header-sep{display:none}.app-sidebar{box-shadow:2px 0 16px #0000001f}.app-main{padding:16px;margin-left:0!important}.app-footer{margin-left:0!important}.card-body{padding:16px}.dt-search-input{width:150px}.modal-box{width:100%;max-width:560px}}@media (width<=600px){.header-logo-area{width:56px}.header-logo-text,.header-greeting{display:none}.header-brand{margin-left:4px;font-size:14px}.app-main,.card-body{padding:12px}.card-header{height:46px}.card-header-title{font-size:13px}.dt-table{min-width:420px;font-size:12px}.dt-table th,.dt-table td{padding:9px 10px}.dt-footer{flex-direction:column;align-items:flex-start;gap:10px}.dt-pagination{align-self:flex-end}.dt-search-input{width:120px;font-size:11px}.dt-search-label{display:none}.modal-overlay{align-items:flex-end;padding:0}.modal-box{border-radius:12px 12px 0 0;width:100%;max-width:100%;max-height:95vh;animation:.25s slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.form-field{grid-template-columns:1fr;gap:4px 0}.form-label{color:#777;padding-top:0;font-size:11px}.form-price-row{flex-wrap:wrap}.form-price-unit{width:100%}.login-card{padding:24px 20px 28px}.equiv-btn{width:26px;height:26px;font-size:11px}.btn-action,.btn-dl{width:30px;height:30px;font-size:13px}}@media (width<=380px){.app-main{padding:8px}.card-body{padding:10px}.dt-table{font-size:11px}.dt-table th,.dt-table td{padding:8px}.login-card{padding:20px 14px 24px}}@media (width<=768px){.header-logo-area{width:52px}.header-logo-text,.header-sep,.header-breadcrumb{display:none}.header-brand{font-size:14px}.header-greeting{display:none}.app-main{padding:10px 10px 16px;margin-left:0!important}.app-footer{margin-left:0!important}.card-body{padding:12px 10px}.dt-toolbar{justify-content:space-between}.dt-search-input{width:140px!important}.dt-page-btn{width:28px;height:28px;font-size:12px}.card-header{height:44px;padding:0 14px}.card-header-title{font-size:13px}.rfq-info-bar{flex-direction:column;gap:6px}}@media (width<=400px){.app-main{padding:8px 8px 12px}.card-body{padding:10px 8px}.dt-search-input{width:110px!important}.equiv-btn{width:24px;height:24px;font-size:11px}.btn-action,.btn-dl{width:28px;height:28px;font-size:12px}}.header-logo-area{justify-content:center;align-items:center;height:40px;padding:0 10px;display:flex}.header-logo-img{object-fit:contain;max-width:140px;max-height:100%}.header-left{align-items:center;gap:10px;display:flex}@media (width<=768px){.header-logo-img{max-width:110px}}@media (width<=480px){.header-logo-img{max-width:90px}}