:root{--bg-primary: #0a0a0c;--bg-card: #16161a;--bg-input: #222228;--border-color: #33333d;--text-white: #ffffff;--text-muted: #94a3b8;--text-green: #22c55e;--accent-green: #16a34a;--accent-hover: #15803d;--accent-blue: #2563eb;--accent-red: #ef4444;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body.dark-theme{background-color:var(--bg-primary);color:var(--text-white);font-family:var(--font-family);line-height:1.5;min-height:100vh;padding:0}.app-container{max-width:900px;margin:0 auto}.app-header{display:flex;justify-content:space-between;align-items:center;background-color:var(--bg-card);padding:4px 8px;border-bottom:1px solid var(--border-color);margin-bottom:8px}.header-title h1{font-size:1.25rem;font-weight:700;color:var(--text-white)}.sub-title{font-size:.85rem;color:var(--text-muted)}.status-badge{display:flex;align-items:center;gap:6px;font-size:.85rem;padding:4px 10px;background-color:#22c55e26;border:1px solid rgba(34,197,94,.3);border-radius:20px;color:var(--text-green)}.badge-dot{width:8px;height:8px;background-color:var(--text-green);border-radius:50%;display:inline-block}.card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:20px;margin-bottom:16px}.section-title{font-size:1.1rem;font-weight:600;margin-bottom:16px;color:var(--text-white)}.customer-group{margin-bottom:16px}.customer-control{border-color:#3b82f6;font-weight:600;color:var(--text-white)}.customer-control:focus{border-color:#60a5fa;box-shadow:0 0 0 2px #3b82f633}.form-grid{display:grid;grid-template-columns:2fr 1.5fr auto;gap:12px;align-items:end}@media (max-width: 640px){.form-grid{grid-template-columns:1fr}}.form-group{display:flex;flex-direction:column;gap:6px;position:relative}.form-group label{font-size:.85rem;font-weight:500;color:var(--text-muted)}.invisible-label{visibility:hidden}@media (max-width: 640px){.invisible-label{display:none}}.form-control{width:100%;padding:12px 14px;background-color:var(--bg-input);border:1px solid var(--border-color);border-radius:8px;color:var(--text-white);font-size:.95rem;outline:none;transition:border-color .2s}.form-control:focus{border-color:var(--accent-green)}.qty-satuan-control{color:var(--text-green);font-weight:600}.qty-satuan-control::placeholder{color:#64748b;font-weight:400}.search-dropdown{position:absolute;top:100%;left:0;right:0;background-color:#1e1e24;border:1px solid var(--border-color);border-radius:8px;margin-top:4px;max-height:220px;overflow-y:auto;z-index:100;box-shadow:0 10px 15px -3px #00000080}.dropdown-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid #2a2a35;transition:background-color .15s}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background-color:#2a2a35}.item-code{font-size:.75rem;color:var(--text-muted);display:block}.item-name{color:var(--text-white);font-weight:500;font-size:.95rem}.hidden{display:none!important}.selected-notice{margin-top:12px;padding:8px 12px;background-color:#2563eb26;border:1px solid rgba(37,99,235,.3);border-radius:6px;font-size:.85rem;color:var(--text-muted)}.text-white{color:var(--text-white)!important;font-weight:600}.text-green{color:var(--text-green)!important;font-weight:600}.btn{padding:12px 20px;border:none;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;transition:background-color .2s,opacity .2s;display:inline-flex;align-items:center;justify-content:center}.btn-success{background-color:var(--accent-green);color:#fff}.btn-success:hover{background-color:var(--accent-hover)}.btn-primary{background-color:var(--accent-blue);color:#fff}.btn-primary:hover{background-color:#1d4ed8}.btn-block{width:100%}.btn:disabled{opacity:.4;cursor:not-allowed}.list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.list-header h2{font-size:1.1rem;color:var(--text-white)}.item-count{font-size:.85rem;background-color:var(--bg-input);padding:4px 10px;border-radius:12px;color:var(--text-muted)}.table-responsive{width:100%;overflow-x:auto;border:1px solid var(--border-color);border-radius:8px;margin-bottom:16px}.order-table{width:100%;border-collapse:collapse;text-align:left}.order-table th{background-color:#1a1a20;color:var(--text-muted);font-weight:600;font-size:.85rem;padding:12px 14px;border-bottom:1px solid var(--border-color)}.order-table td{padding:12px 14px;border-bottom:1px solid #23232c;font-size:.95rem}.order-table tr:last-child td{border-bottom:none}.tbl-item-name{color:var(--text-white);font-weight:500}.tbl-item-code{font-size:.75rem;color:var(--text-muted);display:block}.tbl-qty-satuan{color:var(--text-green);font-weight:700;cursor:pointer;padding:6px 10px;border-radius:6px;background-color:#22c55e14;border:1px dashed rgba(34,197,94,.3);display:inline-block;min-width:100px;transition:background-color .15s}.tbl-qty-satuan:hover{background-color:#22c55e33}.inline-edit-input{background-color:var(--bg-input);border:1px solid var(--text-green);color:var(--text-green);font-weight:700;padding:4px 8px;border-radius:4px;width:100%;outline:none}.empty-state{text-align:center;color:var(--text-muted);padding:24px!important;font-size:.9rem}.btn-delete{background-color:transparent;color:var(--accent-red);border:1px solid rgba(239,68,68,.3);padding:6px 10px;border-radius:6px;cursor:pointer;font-size:.8rem;transition:background-color .15s}.btn-delete:hover{background-color:#ef444426}.order-footer{margin-top:16px}.sync-message{margin-bottom:10px;font-size:.85rem;text-align:center}