body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f9fafb;color:#111827;line-height:1.5}#root{margin:0;padding:0;width:100%;height:100vh}a{color:inherit;text-decoration:none}h1,h2,h3,h4,h5,h6{margin:0;padding:0}button,input,textarea,select{font-family:inherit;font-size:inherit}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #10b981;--color-primary-dark: #059669;--color-primary-light: #d1fae5;--color-secondary: #6366f1;--color-secondary-dark: #4f46e5;--color-danger: #ef4444;--color-warning: #f59e0b;--color-success: #10b981;--color-info: #3b82f6;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--color-white: #ffffff;--color-dark: #0f172a;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--transition: all .3s cubic-bezier(.4, 0, .2, 1)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-gray-50);color:var(--color-gray-900)}.app-container{display:flex;height:100vh;background:var(--color-gray-50)}.app-container-full{display:flex;flex-direction:column;height:100vh;background:var(--color-gray-50)}.main-content-full{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0}.page-content-full{flex:1;overflow-y:auto;display:flex;justify-content:center;align-items:flex-start}.mobile-hamburger{display:none;background:none;border:none;color:var(--color-primary);font-size:1.5rem;cursor:pointer;padding:.75rem;position:fixed;top:1rem;left:1rem;z-index:210;border-radius:8px;transition:var(--transition);line-height:1;opacity:1;visibility:visible;display:flex;align-items:center;justify-content:center}.mobile-hamburger:active{background:var(--color-gray-100)}.mobile-hamburger .icon{width:1.5rem;height:1.5rem}.sidebar-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:150}.sidebar{width:280px;background:var(--color-white);border-right:1px solid var(--color-gray-200);display:flex;flex-direction:column;transition:var(--transition);box-shadow:var(--shadow-md);position:relative;z-index:100}.sidebar.closed{width:80px}.sidebar-header{padding:1.5rem;display:flex;justify-content:space-between;align-items:center;position:relative}.logo-section{display:flex;gap:1rem;align-items:center;flex:1}.logo-icon{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center}.sidebar-logo-img{max-width:100%;max-height:100%;object-fit:contain}.logo-icon .icon{width:1.75rem;height:1.75rem}.logo-text h2{font-size:1.25rem;font-weight:700;color:var(--color-primary);margin:0;white-space:nowrap}.logo-text p{font-size:.75rem;color:var(--color-gray-500);margin:0;white-space:nowrap}.sidebar.closed .logo-text,.sidebar.closed .sidebar-toggle{display:none}.sidebar-toggle{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:6px;transition:var(--transition);color:var(--color-gray-600);display:none}.sidebar-toggle:hover{background:var(--color-gray-100);color:var(--color-primary)}.sidebar-close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:6px;transition:var(--transition);color:var(--color-gray-600);display:none;line-height:1}.sidebar-close-btn:hover{background:var(--color-gray-100);color:var(--color-primary)}.sidebar-nav{flex:1;padding:1.5rem .75rem;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto}.nav-item{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border:none;background:transparent;color:var(--color-gray-600);cursor:pointer;border-radius:8px;transition:var(--transition);font-size:.95rem;font-weight:500;white-space:nowrap;width:100%;text-align:left}.nav-item:hover{background:var(--color-primary-light);color:var(--color-primary-dark)}.nav-item.active{background:var(--color-primary);color:var(--color-white)}.nav-icon{font-size:1.25rem;min-width:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center}.nav-icon .icon,.logo-icon .icon,.avatar .icon,.mobile-hamburger .icon,.logout-btn .icon{width:1.25rem;height:1.25rem}.nav-label{opacity:1;transition:var(--transition)}.sidebar.closed .nav-label{display:none}.sidebar-footer{padding:1rem .75rem;border-top:1px solid var(--color-gray-200)}.logout-btn{width:100%;padding:.75rem 1rem;background:var(--color-gray-100);border:1px solid var(--color-gray-200);color:var(--color-gray-600);border-radius:8px;cursor:pointer;font-weight:500;transition:var(--transition);white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:.5rem}.logout-btn:hover{background:var(--color-danger);color:var(--color-white);border-color:var(--color-danger)}.logout-btn .icon{width:1.25rem;height:1.25rem}.sidebar.closed .logout-btn{padding:.75rem;justify-content:center}.sidebar.closed .logout-btn span{display:none}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.top-bar{background:var(--color-white);border-bottom:1px solid var(--color-gray-200);padding:1.25rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm)}.page-title{font-size:1.75rem;font-weight:700;color:var(--color-gray-900);margin:0}.top-bar-right{display:flex;align-items:center;gap:2rem}.notification-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:8px;transition:var(--transition)}.notification-btn:hover{background:var(--color-gray-100)}.user-profile{display:flex;align-items:center;gap:.75rem;font-weight:500;color:var(--color-gray-600)}.avatar{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--color-primary-light);display:flex;align-items:center;justify-content:center;font-size:1.25rem}.avatar .icon{width:1.25rem;height:1.25rem;color:var(--color-primary)}.page-content{flex:1;overflow-y:auto;padding:2rem}.page-content::-webkit-scrollbar,.sidebar-nav::-webkit-scrollbar{width:6px}.page-content::-webkit-scrollbar-track,.sidebar-nav::-webkit-scrollbar-track{background:var(--color-gray-100);border-radius:10px}.page-content::-webkit-scrollbar-thumb,.sidebar-nav::-webkit-scrollbar-thumb{background:var(--color-gray-400);border-radius:10px}.page-content::-webkit-scrollbar-thumb:hover,.sidebar-nav::-webkit-scrollbar-thumb:hover{background:var(--color-gray-500)}@media(max-width:768px){.mobile-hamburger{display:block}.sidebar-overlay{display:block;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sidebar{position:fixed;left:0;top:0;height:100vh;width:280px;z-index:180;border-right:1px solid var(--color-gray-200);transform:translate(0);animation:slideIn .3s ease-in-out}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}.sidebar.closed{transform:translate(-100%);animation:slideOut .3s ease-in-out}@keyframes slideOut{0%{transform:translate(0)}to{transform:translate(-100%)}}.sidebar-close-btn{display:block}.sidebar-header{padding:1rem}.page-content{padding:1.5rem;margin-left:0}.top-bar{padding:1rem 1rem 1rem 3.5rem}.page-title{font-size:1.5rem}.top-bar-right{gap:1rem}.user-profile span{display:none}.sidebar-nav{padding:1rem .5rem}.nav-item{padding:.75rem 1rem}.sidebar.closed{width:280px}.sidebar.closed .logo-text,.sidebar.closed .nav-label{display:block}}@media(max-width:480px){.page-content{padding:1rem}.top-bar{padding:.75rem .75rem .75rem 3.25rem;gap:.75rem}.page-title{font-size:1.25rem}.top-bar-right{gap:.5rem}.sidebar{width:100%;max-width:280px}.mobile-hamburger{left:.75rem;top:.75rem}}.buat-nota{width:100%;display:flex;justify-content:center;padding:1.5rem;background-color:var(--color-gray-50)}.invoice-document{background-color:var(--color-white);width:100%;max-width:none;padding:3rem;border-radius:0;box-shadow:none;display:flex;flex-direction:column;gap:2.5rem}.invoice-header-grid{display:flex;justify-content:space-between;align-items:flex-start}.logo-container-nota{width:200px;height:auto;display:flex;align-items:center;justify-content:flex-start}.logo-image-nota{max-width:100%;max-height:120px;object-fit:contain}.invoice-title-section{text-align:right;display:flex;flex-direction:column;gap:1rem}.document-title{font-size:2.5rem;font-weight:400;color:#212529;margin:0;letter-spacing:1px}.invoice-number-wrapper{display:flex;align-items:center;justify-content:flex-end;border:1px solid #dee2e6;border-radius:4px;padding:.25rem .5rem;width:fit-content;align-self:flex-end}.hash-symbol{color:#adb5bd;font-weight:600;margin-right:.5rem}.invoice-number-input{border:none;text-align:right;font-weight:500;width:100px;outline:none;font-size:1rem}.invoice-number-display{text-align:right;font-weight:500;min-width:100px;font-size:1rem;color:#212529;display:inline-block}.info-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:4rem}.info-left{display:flex;flex-direction:column;gap:1.5rem}.info-row-flex{display:flex;gap:1.5rem}.info-group{display:flex;flex-direction:column;gap:.5rem;flex:1}.info-label{font-size:.9rem;color:#495057;font-weight:500}.info-input{border:1px solid #dee2e6;border-radius:4px;padding:.65rem .75rem;font-size:.95rem;width:100%;outline:none;transition:var(--transition)}.info-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px #10b9811a}.from-input{font-size:1.1rem;border-color:#dee2e6;margin-bottom:.5rem}.info-right{display:flex;flex-direction:column;gap:.75rem}.meta-group{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:1rem}.meta-label{font-size:.9rem;color:#495057;text-align:right;font-weight:500}.meta-input{border:1px solid #dee2e6;border-radius:4px;padding:.5rem;font-size:.9rem;width:100%;outline:none}.items-table-container{margin-top:1rem}.items-table-new{width:100%;border-collapse:collapse;margin-bottom:1rem}.items-table-new thead th{background-color:#1a2a44;color:var(--color-white);text-align:left;padding:.75rem 1rem;font-weight:500;font-size:.95rem}.items-table-new thead th:first-child{border-top-left-radius:4px}.items-table-new thead th:last-child{border-top-right-radius:4px}.items-table-new tbody td{padding:.5rem 0;border-bottom:1px solid #f1f3f5;vertical-align:middle}.th-barang{width:40%}.th-satuan{width:12%}.th-kuantitas{width:10%}.th-kecepatan{width:18%}.th-jumlah{width:20%;text-align:right!important}.item-input{border:1px solid transparent;padding:.65rem;width:100%;font-size:.95rem;outline:none;transition:var(--transition)}.item-input:hover{border-color:#dee2e6;background-color:#f8f9fa}.item-input:focus{border-color:#adb5bd;background-color:#fff}.center-text{text-align:center}.rate-input-wrapper{display:flex;align-items:center;border:1px solid #dee2e6;border-radius:4px;padding:0 .5rem}.currency-label{color:#adb5bd;font-size:.9rem;margin-right:.25rem}.rate-input{border:none!important;background:transparent!important;padding:.5rem .25rem!important}.amount-cell{text-align:right;padding-right:1rem!important;position:relative}.amount-text{font-weight:500;color:#212529}.btn-remove-row{position:absolute;right:-2rem;top:50%;transform:translateY(-50%);background:none;border:none;color:#adb5bd;cursor:pointer;opacity:0;transition:var(--transition)}tr:hover .btn-remove-row{opacity:1}.btn-remove-row:hover{color:var(--color-danger)}.icon-small{width:1.25rem;height:1.25rem}.btn-add-item{display:flex;align-items:center;gap:.5rem;background-color:var(--color-white);border:1px solid var(--color-primary);color:var(--color-primary);padding:.5rem 1rem;border-radius:4px;font-weight:600;cursor:pointer;transition:var(--transition);font-size:.9rem}.btn-add-item:hover{background-color:var(--color-primary-light)}.icon-plus{width:1rem;height:1rem}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem}.footer-left{display:flex;flex-direction:column;gap:1.5rem}.footer-label{font-size:.95rem;color:#495057;font-weight:500;margin-bottom:.75rem;display:block}.footer-textarea{width:100%;border:1px solid #dee2e6;border-radius:4px;padding:.75rem;min-height:80px;font-size:.9rem;font-family:inherit;resize:vertical;outline:none}.footer-textarea:focus{border-color:var(--color-primary)}.footer-textarea-note{resize:none;min-height:auto;padding:.75rem}.footer-textarea-rekening{margin-top:.5rem}.footer-right,.total-summary{display:flex;flex-direction:column;gap:1rem}.summary-row{display:flex;justify-content:space-between;align-items:flex-start;color:#495057;font-size:.95rem}.summary-row.align-center{align-items:center}.tax-input-group{display:flex;align-items:center;gap:.25rem;border:1px solid #dee2e6;border-radius:4px;padding:.25rem .5rem;background-color:var(--color-white)}.tax-percent-input{border:none;width:40px;text-align:right;outline:none;font-size:.95rem}.percent-sign{color:#adb5bd}.btn-refresh{background:none;border:none;color:#adb5bd;cursor:pointer;padding:.25rem;display:flex;align-items:center}.icon-refresh{width:1rem;height:1rem}.summary-links{display:flex;gap:1.5rem;justify-content:flex-end;margin:.5rem 0}.link-btn{background:none;border:none;color:var(--color-primary);font-weight:600;cursor:pointer;font-size:.9rem;transition:var(--transition)}.link-btn:hover{text-decoration:underline}.total-row-final{border-top:1px solid #f1f3f5;padding-top:1rem;font-size:1.1rem;font-weight:500;color:#212529}.paid-input-wrapper{display:flex;align-items:center;border:1px solid #dee2e6;border-radius:4px;padding:.4rem .6rem;width:160px}.rp-label{color:#adb5bd;margin-right:.5rem}.paid-input{border:none;width:100%;outline:none;text-align:right;font-size:1rem}.balance-due-row{font-weight:700;font-size:1.25rem;color:var(--color-primary);margin-top:.5rem}.invoice-actions-bar{border-top:2px dashed #f1f3f5;padding-top:2rem;margin-top:1rem;display:flex;flex-direction:column;gap:1rem}.action-buttons-flex{display:flex;gap:1rem;justify-content:flex-end}.btn-action-primary,.btn-action-secondary{display:flex;align-items:center;gap:.65rem;padding:.75rem 1.5rem;border-radius:6px;font-weight:600;cursor:pointer;transition:var(--transition);border:none}.btn-action-primary{background-color:var(--color-primary);color:var(--color-white)}.btn-action-primary:hover{background-color:var(--color-primary-dark)}.btn-action-secondary{background-color:var(--color-white);border:1px solid #dee2e6;color:#495057}.btn-action-secondary:hover{background-color:#f8f9fa}.icon-btn{width:1.25rem;height:1.25rem}.text-danger{color:var(--color-danger);text-align:right}.text-success{color:var(--color-success);text-align:right}@media print{body *{visibility:hidden}.buat-nota,.buat-nota *{visibility:visible}.buat-nota{position:absolute;left:0;top:0;padding:0;margin:0;background:#fff}.invoice-document{box-shadow:none;padding:0;max-width:none}.no-print,.btn-remove-row,.btn-add-item{display:none!important}}.print-element{display:none}@media print{.print-element{display:block}}@media(max-width:900px){.invoice-document{padding:2rem}}@media(max-width:768px){.buat-nota{padding:1rem}.invoice-document{padding:1.5rem;gap:1.5rem}.info-grid,.footer-grid{grid-template-columns:1fr;gap:1.5rem}.info-right{align-items:flex-start}.meta-group{grid-template-columns:1fr 1.5fr;text-align:left;width:100%}.meta-label{text-align:left}.invoice-header-grid{flex-direction:column;gap:1rem}.logo-container-nota{width:150px}.logo-image-nota{max-height:80px}.invoice-title-section{text-align:left;align-items:flex-start}.invoice-number-wrapper{align-self:flex-start}.document-title{font-size:1.75rem}.info-input,.meta-input,.footer-textarea{font-size:1rem}.info-row-flex{flex-direction:column;gap:1rem}.summary-row{font-size:.9rem}.tax-input-group,.paid-input-wrapper{width:100%}.summary-links{flex-direction:column;gap:.75rem}.link-btn{text-align:left;width:fit-content}.action-buttons-flex{flex-direction:column;gap:.75rem}.btn-action-primary,.btn-action-secondary{width:100%;justify-content:center;padding:.85rem 1rem}}@media(max-width:600px){.buat-nota{padding:.75rem}.invoice-document{padding:1rem;gap:1.25rem;border-radius:0}.invoice-header-grid{gap:.75rem}.logo-container-nota{width:120px}.logo-image-nota{max-height:60px}.document-title{font-size:1.5rem;margin:0}.invoice-number-wrapper{padding:.2rem .4rem;font-size:.9rem}.hash-symbol{margin-right:.25rem}.invoice-number-display{min-width:70px;font-size:.9rem}.info-label,.footer-label,.meta-label{font-size:.85rem}.info-input{padding:.55rem .6rem;font-size:.9rem}.from-input{font-size:1rem}.meta-input{padding:.5rem;font-size:.85rem}.info-left{gap:1rem}.info-group{gap:.4rem}.items-table-container{margin-top:.75rem;margin-left:-1rem;margin-right:-1rem;padding:0 1rem;overflow-x:auto}.items-table-new{width:100%;font-size:.85rem;min-width:550px}.items-table-new thead th{padding:.6rem .5rem;font-size:.8rem;font-weight:600}.items-table-new tbody td{padding:.4rem .5rem}.th-barang{width:35%}.th-satuan{width:15%}.th-kuantitas{width:12%}.th-kecepatan{width:18%}.th-jumlah{width:20%}.item-input{padding:.5rem .4rem;font-size:.85rem}.rate-input-wrapper{padding:0 .3rem}.currency-label{font-size:.8rem;margin-right:.15rem}.amount-cell{padding-right:2.5rem!important;position:relative}.amount-text{font-size:.85rem}.btn-remove-row{right:-1.5rem}.btn-add-item{gap:.35rem;padding:.4rem .75rem;font-size:.8rem;width:100%;justify-content:center}.icon-plus{width:.9rem;height:.9rem}.icon-small{width:1.1rem;height:1.1rem}.footer-textarea{min-height:70px;padding:.6rem;font-size:.85rem}.total-summary{gap:.75rem}.summary-row{font-size:.85rem;padding:.4rem 0}.tax-input-group{padding:.2rem .4rem;gap:.15rem}.tax-percent-input{width:35px;font-size:.85rem;padding:.25rem .2rem}.percent-sign{font-size:.8rem}.btn-refresh{padding:.15rem}.icon-refresh{width:.9rem;height:.9rem}.paid-input-wrapper{padding:.35rem .5rem}.rp-label{font-size:.8rem;margin-right:.3rem}.paid-input{font-size:.9rem}.total-row-final{font-size:1rem;padding-top:.75rem}.balance-due-row{font-size:1.1rem;margin-top:.3rem}.invoice-actions-bar{border-top:1px solid #f1f3f5;padding-top:1rem;margin-top:.75rem;gap:.75rem}.btn-action-primary,.btn-action-secondary{padding:.75rem 1rem;font-size:.9rem}.icon-btn{width:1.1rem;height:1.1rem}.text-danger,.text-success{font-size:.85rem}.meta-group{grid-template-columns:1fr 1fr;gap:.75rem}}@media(max-width:480px){.buat-nota{padding:.5rem}.invoice-document{padding:.75rem;gap:1rem;border-radius:0}.invoice-header-grid{gap:.5rem}.logo-container-nota{width:100px}.logo-image-nota{max-height:50px}.document-title{font-size:1.25rem}.invoice-number-wrapper{padding:.15rem .3rem}.info-label,.footer-label,.meta-label{font-size:.8rem}.info-input{padding:.5rem;font-size:.9rem}.from-input{font-size:.95rem}.info-left{gap:.75rem}.info-group{gap:.3rem}.items-table-container{margin-left:-.75rem;margin-right:-.75rem;padding:0 .75rem}.items-table-new{font-size:.75rem;min-width:450px}.items-table-new thead th{padding:.5rem .3rem;font-size:.7rem}.items-table-new tbody td{padding:.35rem .3rem}.item-input{padding:.4rem .3rem;font-size:.8rem}.th-barang{width:30%}.th-satuan{width:17%}.th-kuantitas{width:13%}.th-kecepatan,.th-jumlah{width:20%}.amount-cell{padding-right:2rem!important}.btn-remove-row{right:-1.2rem}.btn-add-item{padding:.35rem .5rem;font-size:.75rem}.icon-plus{width:.8rem;height:.8rem}.footer-textarea{min-height:60px;padding:.5rem;font-size:.8rem}.summary-row{font-size:.8rem;padding:.3rem 0}.tax-percent-input{width:30px;font-size:.8rem}.total-row-final{font-size:.95rem}.balance-due-row{font-size:1rem}.invoice-actions-bar{padding-top:.75rem}.btn-action-primary,.btn-action-secondary{padding:.65rem .75rem;font-size:.85rem}.icon-btn{width:1rem;height:1rem}}